HTML部分总结

ゝ一纸荒年。 2022-03-25 08:43 232阅读 0赞

## HTML部分总结 ##

开发工具与关键技术：DW、HTML 部分总结
    作者：黄桂康
    撰写时间：2019.01.19

1、HTML是一种超文本标记语言，用来描述网页，他是用标记标签来描述网页的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70]  
通过许多标记标签来定义它们的样式，然后就可以得到下截图的效果，HTML就是利用这些标记标签来描述网页的。下截图为标记标签里的文字样式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70 1]  
2、HTML 标题

#  #

最大

##  ##

###  ###

####  ####

#####  #####

######  ######

最小 3、HTML 段落

4、HTML 链接  在href中可选择你要跳转的链接，\#可以不用刷新， . /会提示你跳转的路径，如下截图 !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20190119192256150.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg==,size\_16,color\_FFFFFF,t\_70) 5、HTML 图像 ![Image 1][]

![在这里插入图片描述][20190119192313460.png]  
上截图就是img标签的应用，src它的路径，要注意的是你所选的照片要放在同你页面的文件夹一起。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70 2]  
上截图就是img成功应用到页面中的照片eve1.jpg  
6、HTML 元素  
HTML元素都会有一个开始标签和结束标签，内容写在它们之间。  
7、HTML 列表  
有序列表和无序列表

用来排序多个元素的标签。 8、HTML 布局 布局是非常重要的，布局不好会使你的网页混乱，分不清，外观不漂亮，而导致别人欣赏不兴。 对我来说经常用div来布局的，给他一个div。（也可以用table元素布局） !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/2019011919235627.png) 上截图，简单的一个HTML布局，一个div，给他样式style，宽高背景颜色，以往很多程序员都是在css样式类型那边敲css样式，而现在这个方法更省便，就是直接嵌入我们的元素里面，上截图是把样式嵌入div当中，这样的方法不用耗费更多的时间。 9、HTML 颜色background属性和color属性，前者是背景颜色，后者是文字颜色，

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70 3]  
这是在一个父元素的div里放了四个小div，一样的宽高，各自的背景颜色，前面两个div设置了float：left，而后面两个则是float：right。这样他们就可以挤这个大盒子里面。  
![在这里插入图片描述][2019011919243435.png]  
而行内元素只会让他们四个并排显示，display：flex并不能达成这样的效果。

························ ······································。。。。。。。。。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70]: /images/20220325/3bf18fcd1f044e3badc9fd7b5006a056.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70 1]: /images/20220325/993dc6ca503d481a93de781f1a358870.png
[Image 1]: 
[20190119192313460.png]: /images/20220325/e570ecc1dcd04fef9294de089a5b89b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70 2]: /images/20220325/597b4053fd954d8ab00e129f45aaa166.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70 3]: /images/20220325/9d83fde915cf4c5aa84d592c4a53ad6f.png
[2019011919243435.png]: /images/20220325/92df857db71d4c04a005f1c6a387fd9d.png