html標籤的嵌套規則分析

1.a標籤最好不要嵌套塊級元素，能夠嵌套內聯元素，可是不能嵌套a標籤和input之類的標籤。能嵌套的標籤像,等等。

2.ul和ol的子元素不能是別的元素只能是li，不能是別的好比div等，可是li中能夠是div，要否則在ie6和7下回把非li解析到li的內部。這個切記沒有辦法修復！

3.p標籤不能嵌套塊級元素甚至不能嵌套p元素，只能嵌套內聯元素，否則對p嵌套的塊級元素設置css不起做用。4.button裏面不要嵌套a標籤，否則在js裏面會有兩個事件，還有就是button裏面放img要記得給圖片添加alt屬性。

5.dt標籤裏面不能嵌套塊級元素，只能嵌套內聯元素。可是dd能夠嵌套塊級元素。

 

這個也許平時人們不注意，可是很是有用，尤爲是當你實在找不到緣由爲何網頁顯示錯誤的時候。

XHTML 的標籤有許多：div、ul、li、dl、dt、dd、h1~h六、p、a、addressa、span、 strong……咱們在運用這些標籤搭建頁面結構的時候，是能夠將它們無限嵌套的，可是，嵌套也須要有必定規則，不能任由本身的我的習慣胡亂嵌套——XHTML 必竟不是 XML。

在 XHTML 的語言裏，咱們都知道：ul 標籤包含着 li、dl 標籤包含着 dt 和 dd——這些固定標籤的嵌套規則十分明確。可是，還有許多標籤是獨立的，它們沒有被捆綁在一塊兒，好比 h一、div、p……那麼這些標籤的嵌套規則究竟是怎樣的？今天就來講說這個話題。

提到 XHTML 標籤的嵌套規則，咱們先得知道有這麼二類 XHTML 標籤，一類叫作 塊級元素(block)，一類叫作 內嵌元素（inline，也有許多人叫它：內聯、行內、線級等）。

塊級元素 和 內嵌元素 的劃分標準很簡單，請把下面二行代碼放進 body 標籤裏：

 

瀏覽器的呈現效果：

頁面呈現的這二個 div 佔據了二行空間，除非讓它們浮動（float）或是進行其餘設置，不然誰都不挨着誰，它們都很霸道的佔領屬於本身的那一行空間——但凡看到某個標籤有此現象，你就能夠叫它：塊級元素（block）；

再把下面二行代碼也放進 body 標籤裏：

<span style=」border: 1px solid red;」>span1</span>
<span style=」border: 1px solid red;」>span2</span>

瀏覽器的呈現效果：

這一次，兩個 span 並列在一行，它們之間睦鄰友好、親切和諧……像這樣的標籤行爲，咱們能夠稱它們爲：內嵌元素（inline）;

塊級元素和內嵌元素的區別：

· 塊級元素
通常用來搭建網站架構、佈局、承載內容……像這些大致力活都屬於塊級元素的，它包括如下這些標籤：

div、ul、li、dl、dt、dd、h1~h六、p、address……

· 內嵌元素
通常用在網站內容之中的某些細節或部位，用以「強調、區分樣式、上標、下標、錨點」等等，下面這些標籤都屬於內嵌元素：

a、span、strong、sub、sup、img……

· 塊元素 和 內嵌元素
是能夠互相轉換的，轉換的代碼以下：

display: block;

display: inline;

· 塊元素 和 內嵌元素 對於 CSS 的調用規則是不同的（這篇文章討論的是標籤嵌套，因此對這個知識點不展開說明）。

簡單認識了塊元素和內嵌元素之後，下面就能夠羅列 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> —— 錯