html標籤嵌套規則

標籤：其它   包含   class   文法   標題   代碼   規則   嵌套規則   color   

我們知道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標籤嵌套規則