前幾天在做一個網站的時候偶然發現了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樣式來達到嵌套效果，進行標簽嵌套，但是為了提高瀏覽器的渲染效率，我們應該盡少的嵌套標簽，扁平化。