常用的html标签

标签最大的特点：互相包裹，互相嵌套

       网页布局中最外层一般用div，第二层也用div，第三层和第四层尽量不用div标签，例如第三层div.logo可以用h1.logo1代替

所有标签身上可以添加style属性，这个属性是给当前这个标签身上添加css样式；style属性在页面布局时，需要就近使用某个特殊的样式时使用

所有标签身上可以添加class属性，这个属性是用来引入样式表中的样式或者引入嵌入式样式，给当前这个标签身上添加css样式

所有标签身上可以添加id属性，这个属性是给当前这个标签一个唯一的名称，这个名称要在当前页面上有唯一性

class属性是用来写页面布局的。id属性是用来写js脚本交互、数据校检

1、<p>,<br>标签

<style> P{ color: #0099CC; } </style> 
<!-- p段落标签（双标签） 特点：
1段落与段落之间有空隙 
2段落标签内容默认左对齐 
3align="center"水平方向对齐方式 -->
<p>整站运营</p> <p>整站运营</p> 
<!-- <br>换行标签（单标签） --> 
<p align="center">整站运营</p> 
<p align="right">整站<br>运营</p>

代码演示：

2、<hr>水平分割线

<!-- hr水平分割线(单标签) --> 
<hr color="red"> <hr color="lightblue" width="800px"> 
<hr color="lightcyan" width="80%">

代码演示：

3、<h1>-<h6>标签

<!-- h1-h6标题标签 特点：
数字越小，字号越大 h1标签用在网站的logo或文章的大标题区域
h2标签用在一篇文章的二级标题或一个版块的二级区域 
h3 --> 
<h1></h1> 
<!-- h1*6 --> 
<h1></h1> <h1></h1> <h1></h1> <h1></h1> <h1></h1> <h1></h1> 
<!-- h$*6 --> 
<h1 align="center">“百年未有之大变局”视阈下的中国与世界</h1> 
<h2>“百年未有之大变局”视阈下的中国与世界</h2> 
<h3>“百年未有之大变局”视阈下的中国与世界</h3> 
<h4>“百年未有之大变局”视阈下的中国与世界</h4> 
<h5>“百年未有之大变局”视阈下的中国与世界</h5> 
<h6>“百年未有之大变局”视阈下的中国与世界</h6>

代码演示：

4、<i>,<em>斜体标签

<!-- i斜体标签（双标签） --> <i>meng</i> <em>test</em>

5、<u>下划线标签

<!-- u下划线标签 --> <u>demo</u>

6、 <b>，<strong>加粗标签

<!-- b，strong加粗标签 --> <b>demo</b> <strong>test</strong>

7、<del>删除线标签

<!-- del删除线标签 --> <del>65465</del>

代码演示：

8、<sub>下标标签

<P> <!-- sub下标标签 --> H<sub>2</sub>+O<sub>2</sub>=H<sub>2</sub>O </P>

代码演示：

9、<sup>上标标签

<p> <!-- 3的二次方 --> <!-- sup上标标签 --> 3<sup>2</sup> </p>

代码演示：

10、<img>图片标签

<p> <!-- src表示图片所在路径；title当鼠标在图片是将浮现提示信息；alt当图片找不到时，告知别人图是用来做什么的 在网络布局中一般只给宽度值，宽度值会自动调整 --> <img src="./img/logo.png" title="logo" alt="我" width="350px"> </p>

代码演示：    

11、<a>链接标签

<p> <!-- 超链接标签 href="链接地址" target="_blank"链接地址在跳转时在新的标签页打开 --> <a href="http://www.fontawesome.com.cn/faicons/#hand" target="_blank">test</a>

代码演示：

12、<ul>无序列表标签

<p> <!-- ul无序列表标签 type="circle"字体前面的圆点变成空心圆 type="square"实心正方形 可以在ul一起添加，也可以在li元素指定添加 --> <ul> <!-- li列表项标签 --> <li type="circle">澳大利亚想去WTO告中国，却发现华为问题上亲手挖的坑</li> <li>柯文哲：台北市容“难看”，比不上大陆一线城市</li> </ul> </p>

代码演示：

13、<ol>有序列表

<p> <!-- ol有序列表，会让li前面有序号 也可以在ol中添加type属性，来改变序号样式，也可以在li标签指定添加type--> <ol type="a"> <li type="1">美宣称58家中国公司与军方有关联 公布名单</li> <li>美宣称58家中国公司与军方有关联 公布名单</li> <li>美宣称58家中国公司与军方有关联 公布名单</li> </ol> </p>

代码演示：