HTML嵌套規則

參考：

      html標籤的嵌套規則-慕課網

      HTML標籤嵌套規則-博客園

      WEB標準系列-HTML元素嵌套

---

塊元素：

     address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h六、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul等

內聯元素：

     a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var等

 

嵌套規則：

• 塊能包含塊和內聯，內聯只能包含內聯
  •  塊元素能夠包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素
• 標題和段落中不能包含塊
  • 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是
  • h一、h二、h三、h四、h五、h六、p、dt
• 塊與內聯不能並列
  • 塊級元素與塊級元素並列、內嵌元素與內嵌元素並列

注意：

li是塊級元素，能夠嵌套塊級元素（包括ul）。

有些標籤是固定的嵌套規則，好比ul包含li、ol包含li、dl包含dt和dd等等。

<textarea>不能夠嵌套本身，自行參考該標籤在w3School教程上的實例。

這裏說明一下，雖然能夠可使用display設置block和inline，但以此來定義嵌套關係很顯然不嚴謹。（不知道搜索引擎會不會抓取CSS內容？）

---

進階知識

      WEB標準系列-HTML元素嵌套

     因爲如今本身接觸不到HTML5，因此先保留

嵌套錯誤可能引發的問題

• 元素開始與結束標籤嵌套錯誤，頁面能夠在大部分瀏覽器被正常解析，IE9會出現解析錯誤
• 在<p>元素內嵌入<div>等元素形成全部瀏覽器的解析錯誤
• 在<h1>~<h6>元素內嵌入<div>等元素全部瀏覽器能夠解析正常
• 在<a>元素內嵌入<a>元素會致使全部瀏覽器的解析錯誤（a也不可嵌套button，input等交互元素）
• 在列表元素<li><dt><dd>等插入非列表兄弟元素會致使IE6\IE7的解析錯誤

其實，這裏說解析錯誤並非很合理，應該是說瀏覽器解析出來的結果和咱們指望的結果不一致，但 任何的嵌套錯誤都不會致使頁面呈現有很大的出錯。

 

---

最後：

      雖然咱們能夠嵌套標籤，可是爲了提升瀏覽器的渲染效率，咱們應該盡少的嵌套標籤，扁平化。

 

還有

< ul >

    < li >< h4 >< a href = "" >< div ></ div ></ a ></ h4 ></ li >

  </ ul >

以上代碼來自Facebook，瞬間以爲本身好牛逼！哈哈。