我們知道js代碼如果有語法錯誤，瀏覽器會拒絕執行並報錯。但是！瀏覽器遇到不合法的html時不會報錯，會千方百計地把它渲染出來。

XHTML 標簽的嵌套規則了：

1. 塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素：

<div><h1></h1><p></p></div> —— 對
<a href=”#”><span></span></a> —— 對
<span><div></div></span> —— 錯

2. 塊級元素不能放在<p>裏面：

<p><ol><li></li></ol></p> —— 錯

<p><div></div></p> —— 錯

3. 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標簽是：

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

4. li 內可以包含 div 標簽 —— 這一條其實不必單獨列出來的，但是網上許多人對此有些疑惑，就在這裏略加說明：

li 和 div 標簽都是裝載內容的容器，地位平等，沒有級別之分（例如：h1、h2 這樣森嚴的等級制度^_^），要知道，li 標簽連它的父級 ul 或者是 ol 都可以容納的，為什麽有人會覺得 li 偏偏容納不下一個 div 呢？別把 li 看得那麽小氣嘛，別看 li 長得挺瘦小，其實 li 的胸襟很大滴……

5. 塊級元素與塊級元素並列、內嵌元素與內嵌元素並列：

<div><h2></h2><p></p></div> —— 對

<div><a href=”#”></a><span></span></div> —— 對

<div><h2></h2><span></span></div> —— 錯

總體來說：塊級元素能嵌入內聯元素和部分塊級元素，內聯元素只能嵌入內聯元素。

1、只能嵌入內聯元素的塊級元素：h1~h6, p, dt

2、li元素可以嵌入ul, ol, div

下面有幾個典型的錯誤：

1.開始與結束標簽嵌套錯誤；

 <div><h2>標題</div></h2>

2.p元素嵌套div

<p>
    <div>好的</div>
</p>

3.列表元素li的兄弟元素為div

<ul>
            <li>天上下凡三聖母</li>
            <div>沈香日夜哭著要尋母</div>
        </ul>

4.a元素嵌套a元素

<a href=""><a href="">鏈接</a></a>

5.h元素嵌套div元素

<h1><div>標題</div></h1>

html標簽嵌套規則