HTML标签嵌套规范总结

        今天遇到一个嵌套规范的题目，忙里偷闲总结记录一下，大家都听过“行内元素不能嵌套块级元素”吧，因此进入正文之前先来说一下哪些是块级元素，哪些是行内元素。赶时间的老铁可以直接翻到最后哦。

一、块级元素

一般用来搭建网站架构、布局、承载内容等，包括以下标签：

div、h1~h6、address、blockquote、center、dl、dt、dd、form、hr、ol、p、table、ul……

特点：

• 独占一行，能够识别宽高
• margin和padding的上下左右均对其有效
• 自动填满父元素，即宽度默认是容器的100%，除非设定宽度。
• 多个块状元素标签写在一起，默认排列方式为从上至下

二、行内元素

主要用于加强内容显示，控制细节，例如：加粗、斜体等，包括以下标签：

span、a、b、big、br、em、font、i、img、input、label、q、s、select、small、strong、sub、sup、textarea……

特点：

• 设置宽高无效（即高、行高及顶和底边距不可改变）
• 对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
• 不会自动进行换行
• 不会独占一行，和其他元素都在一行上

接下来进入正文啦！！！

三、嵌套规范总结

1.块级元素与块级元素平级、内嵌元素与内嵌元素平级

<div><span></span><p></p></div>  //span是行内元素，p是块级元素，所以这个是错误的嵌套

<div><span></span><a></a></div>  //对的

2.块级可包含行内/块级，但行内不能包含块级，它只能包含其它的行内元素

<div><span></span></div> //正确

<span><span></span></span>  //正确

<span><p></p></span>   //错误

3.几个特殊的块级元素只能包含行内元素，不能再包含块级元素

h1、h2、h3、h4、h5、h6、p、dt

4.块级元素不能放在标签p里面

5.li 标签可以包含 div 标签，因为li 和 div 标签都是装载内容的容器

6.<form>不可嵌套<form>

7.<header>、<footer>不可嵌套<header>、<footer>

8.<caption>不可嵌套<table>

9.<dt>、<th>不可嵌套<header>、<footer>、区块型元素(sectioning content)、标题型元素(heading content)

---------------------------------------------------------------------------------------------------------------------------------

写在最后：虽然我们常常会有嵌套标签，也有专门的规范，但是为了提高浏览器的渲染效率，我们应该尽少的嵌套标签，扁平化。