一，标签分类
1，按类型分
1，block（块）：
div，ul，ol，li，dl，dd，dt，p，h1......h6，
特点 ：
①，块是上下排列的，块是独占一行的
②，块支持所有CSS样式
③，当块不写宽度的时候，默认的宽是父容器的宽
④，块永远是一个矩形区域
2，inline（内联） ：
span，img，a，strong，em
特点 ：
①，内联是左右排列的，内联必须在一起
②，内联有些样式是不支持的，width，height，padding-top，margin-top
③，内联元素的宽度是由内容决定的
④，不一定是矩形区域
⑤，两个内联元素之间有一个间隙（折行带来的间隙）
一般情况下是不需要解决这个问题的，因为我们一般用块做布局，用内联元素做文本修饰
解决 ： 1，然内联元素写到一行上
2，给父容器设置font-size=0，再给当前元素设置正常的文字大小
3，inline-block（内联的块）
input，select
同时具有内联样式与块样式的特性
2，按显示分
1，替换元素 ： 浏览器根据元素的标签和属性，决定元素的具体显示内容。
img，input
2，非替换元素 ： 将内容直接告诉浏览器，将其显示出来
<div>aaaaaaa</div>
注 ： 图片<img>是一个内联标签，但是它可以调节宽高（因为它还是一个替换元素）
3，display
查看每一个标签的类型（显示框类型）
值 ：
block ， inline ， inline-block ， none
none ： 不显示标签（不占位），类似于border-right：none text-decoration：none
display ： none 与 visibility：hidden（不显示标签，原标签位置留白）的区别 ： 后者是占位的
4，标签嵌套规范
可以通过右键，对选中代码进行格式化（整理杂乱无章的代码）
标签本身就有许多嵌套规范
table(tr(td,th))
ul，li
dl，dd，dt
块标签可以嵌套内联标签
<div> √
<span></span>
</div>
块标签不一定能嵌套块标签
<div> √
<div></div>
</div>
特殊
<p> ×
<div></div>
</p>
内联标签不可以嵌套块标签
<span> ×
<div></div>
</span>
特殊
<a href=""> √
<div></div>
</a>
不能自己嵌套自己的操作：
<a href=""> 错
<a href=""></a>
</a>
<h2> 错
<h2></h2>
</h2>
5，透明度
opacity ： 0（完全透明） ~ 1（不透明），跟display：none 也是有区别的。
rgb（），rgba（）a的取值也是0-1，
使用rgba（）设置透明度会使背景透明，容器的内容不会透明，而使用opacity可以使容器完全透明。