HTML標簽嵌套規則

摘要：

　　 最近在整理項目時發現有些同事寫的頁面代碼嵌套的太多，而且有些嵌套不對，比如<a><div>內容</div></a>。雖然功能實現了，但是對於瀏覽器渲染引擎的性能還是有些影響。所以就大體上的整理了下HTML標簽的嵌套規則，也希望讀者提出不對之處。

眾所周知，HTML標簽有兩類：

1. 塊級元素
   div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul ...
   特點：總是在新行上開始，高度、行高以及頂和底邊距都可控制，寬度缺省是它的容器的100%，除非設定一個寬度
   功能：主要用來搭建網站架構、頁面布局、承載內容
2. 行內元素
   span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、sup、textarea、tt、u、var ...
   特點：和其他元素都在一行上，高、行高及頂和底邊距不可改變，寬度就是它的文字或圖片的寬度，不可改變
   功能：用於加強內容顯示,控制細節，例如：加粗、斜體等等

舉個例子：

• 塊級元素
  

  <div>one</div><div>two</div>

  顯示效果如下：

  one

  two

• 行內元素
  

  <span>one</span><span>two</span>

  顯示效果如下：

  onetwo

塊級元素與行內元素並不是一成不變的，我們可以通過CSS來改變他的特性

display: inline; //行內元素

display: block; //塊級元素

雖然HTML標簽有很多並且我們在制作頁面的時候可以無限的嵌套，但是嵌套也有規則，不能隨意的嵌套。有些標簽是固定的嵌套規則，比如ul包含li、ol包含li、dl包含dt和dd等等。還有很多是獨立的標簽，我們如何來使用它編寫更優秀的頁面，下面就說說

1. 塊級元素與塊級元素平級、內嵌元素與內嵌元素平級
   

   <div><span></span><p></p></div>  //span是行內元素，p是塊級元素，所以這個是錯誤的嵌套

   <div><span></span><a></a></div>  //對的

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

   <div><span></span></div>

   <span><span></span></span>

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

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

4. 塊級元素不能放在標簽p里面
   
   
5. li 標簽可以包含 div 標簽，因為li 和 div 標簽都是裝載內容的容器

小結：

    ​雖然我們可以嵌套標簽，但是為了提高瀏覽器的渲染效率，我們應該盡少的嵌套標簽，扁平化