关于HTML嵌套规则的思考

  前几天在做一个网站的时候偶然发现了p标签里面嵌套div元素导致出来的效果和预期不符的情况，后来查询了一些资料，现整理如下。

  首先先罗列一下HTML的嵌套规则。

1. 块能包含块和内联，内联只能包含内联

·         块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素

2. 标题和段落中不能包含块

·        有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是

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

3. 块与内联不能并列

·        块级元素与块级元素并列、内嵌元素与内嵌元素并列。

注意：

1.    li是块级元素，可以嵌套块级元素（包括ul）。

2.    有些标签是固定的嵌套规则，比如ul包含li、ol包含li、dl包含dt和dd等等。

3.    <textarea>不可以嵌套自己，w3cschool上面有说明。

4.    这里说明一下，虽然可以可以使用display设置block和inline，但以此来定义嵌套关系很显然不严谨。（不知道搜索引擎会不会抓取CSS内容？）

嵌套错误可能引起的问题

1.   元素开始与结束标签嵌套错误，页面可以在大部分浏览器被正常解析，IE9会出现解析错误

2.   在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误

3.   在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常

4.   在<a>元素内嵌入<a>元素会导致所有浏览器的解析错误（a也不可嵌套button，input等交互元素）

5.   在列表元素<li><dt><dd>等插入非列表兄弟元素会导致IE6\IE7的解析错误

 

总结，虽然可以通过css样式来达到嵌套效果，进行标签嵌套，但是为了提高浏览器的渲染效率，我们应该尽少的嵌套标签，扁平化。