前几天在做一个网站的时候偶然发现了p标签里面嵌套div元素导致出来的效果和预期不符的情况，后来查询了一些资料，现整理如下。
首先先罗列一下HTML的嵌套规则。
块能包含块和内联，内联只能包含内联· 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
标题和段落中不能包含块· 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是
· h1、h2、h3、h4、h5、h6、p、dt
块与内联不能并列· 块级元素与块级元素并列、内嵌元素与内嵌元素并列。
注意：
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样式来达到嵌套效果，进行标签嵌套，但是为了提高浏览器的渲染效率，我们应该尽少的嵌套标签，扁平化。
