第三讲 HTML标签分类以及嵌套规则

HTML中的标签分为：块级标签、行内标签、行内块级标签。

块级元素

标签：h1-h6、 p、ul、ol、dl、li、dt、dd、table、from、div

特点：

1、独占一行，默认情况下，其宽度填满父级标签的宽度；

2、可以设置宽高，即使设置了宽度仍然独占一行；

3、可以设置margin与padding;

4、可以嵌套块级元素以及行内元素或者行内块级元素；

5、可以转换成行内元素或者行内块级元素

行内元素

标签:span、strong、b、em、i、br、a

特点：

1、不会独占一行，相邻行内元素会排成一排直到一排排不下，才会换行，其宽度随内容变化；

2、不可以设置宽高，设置了宽高不起作用；

3、设置margin之后，上下margin不起作用，左右margin其作用，相邻元素的左右margin叠加；

4、设置pading之后，上下左右padding都起作用；

5、可以转换成块级元素。display:block;

6、不可以嵌套块级元素；

 

行内块级元素

标签：img  input

特点：

1、不会独占一行；

2、可以设置宽高，设置了宽高还是不会独占一行；

3、可以设置margin与padding,上下margin不起作用；

4、不可以嵌套其他元素。

5、可以转换成块级元素。

总结：行内块级元素是既有块级元素的特点（margin,padding上下左右都起作用，可以设置宽高）也有行内元素的特点（不会独占一行）。也有自己的特点（都是单标签，无法嵌套元素）。

 

标签的嵌套规则

1、不能交叉嵌套；

2、块级元素可以嵌套块级元素与行内元素或者行内块级元素；

3、行内元素不可以嵌套块级元素；

4、有几个特殊的块级元素只能嵌套行内元素不能嵌套块级元素。h1-h6  p  dt