html標籤嵌套規則

咱們知道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. 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是：

h一、h二、h三、h四、h五、h六、p、dt。

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

li 和 div 標籤都是裝載內容的容器，地位平等，沒有級別之分（例如：h一、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> —— 錯

 

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

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

二、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>