#### 元素分類 HTML5中，元素主要分為7類： 1. Metadata 元數據元素 2. Flow 流式元素 3. Sectioning 章節元素 4. Heading 標題元素 5. Phrasing 段落元素 6. Embedded 嵌入元素 7. Interactive 交互元素 這些分類集合互相之間也存在一定的交集(一個元素可以同時屬于多個分類)，其交集關系呈現為：  ###### Metadata Metadata元素意指那些定義文檔元數據信息的元素 — 其作用包括：影響文檔中其它節點的展現與行為、定義文檔與其它外部資源之間的關系等。以下元素屬于Metadata： ``` base, link, meta, noscript, script, style, template, title ``` ###### Flow 所有可以放在body標簽內，構成文檔內容的元素均屬于Flow元素。因此，除了base, link, meta, style, title等只能放在head標簽內的元素外，剩下的所有元素均屬于Flow元素。 ``` a， abbr， address， area， article， aside， audio， b， bdi， bdo， blockquote， br， button， canvas， cite， code， command， datalist， del， details， dfn， div， dl，em， embed， fieldset， figure， footer， form， h1， h2， h3， h4， h5， h6， header， hgroup， hr， i， iframe， img， input， ins， kbd， keygen， label， map， mark， math， menu， meter，nav， noscript， object， ol， output， p， pre， progress， q， ruby， s， samp， script， section， select， small， span， strong， style（如果該元素設置了scoped屬性）， sub， sup， svg， table，textarea， time， u， ul， var， video， wbr， text ``` ###### Sectioning Sectioning意指定義頁面結構的元素，具體包含以下四個： ``` article, aside, nav, section ``` ###### Heading 所有標題元素屬于Heading，也即以下6個元素： ``` h1, h2, h3, h4, h5, h6 ``` ###### Phrasing 所有可以放在p標簽內，構成段落內容的元素均屬于Phrasing元素。因此，所有Phrasing元素均屬于Flow元素。 對于這一定義，個人認為不應當使用“text”這一容易引起誤解的詞，事實上，一個元素即使不是文本，只要能包含在p標簽中成為段落內容的一部分，就可以稱之為Phrasing元素。 ``` a（如果其只包含段落式元素）， abbr， area， audio， b， bdi， bdo， br， button， canvas， cite， code， command， datalist， del（如果其只包含段落式元素）， dfn， em， embed， i，iframe， img， input， ins（如果其只包含段落式元素）， kbd， keygen， label， map（如果其只包含段落式元素）， mark， math， meter， noscript， object， output， progress， q， ruby， s， samp， script，select， small， span， strong， sub， sup， svg， textarea， time， u， var， video， wbr， text ``` 一個不太精確的類比是：HTML5中的Phrasing元素大致就是HTML4中所定義的inline元素。 Phrasing元素內部一般只能包含別的Phrasing元素。 ###### Embedded 所有用于在網頁中嵌入外部資源的元素均屬于Embedded元素，具體包含以下9個： ``` audio, video, img, canvas, svg, iframe, embed, object, math ``` ###### Interactive 所有與用戶交互有關的元素均屬于Interactive元素。 ``` a， audio（如果設置了controls屬性）， button， details， embed， iframe， img（如果設置了usemap屬性）， input（如果type屬性不為hidden狀態）， keygen， label， menu（如果type屬性為toolbar狀態），object（如果設置了usemap屬性）， select， textarea， video（如果設置了controls屬性） ``` ##### 內容模型(Content Model) 根據以上元素分類，HTML5標準文檔定義了任何元素的內容模型 — 對于該元素而言，何種子元素才是合法的。 比如，對于p元素而言，其內容模型為Phrasing, 這意味著p元素只接受Phrasing元素為子元素，而對于像div這樣的非Phrasing元素則并不接受。類似的，li元素的內容模型為Flow，因此任何可以放置在body中的元素都可以作為li元素的子元素。 值得注意的是，HTML5標準文檔在定義元素的內容模型時，會使用一類特殊的分類：透明內容模型(transparent) — 對于內容模型為透明(transparent)的元素而言，其子元素的合法性由其父元素所決定；如果其父元素的內容模型仍為透明，則查看其祖父元素的情況，并依此類推；如果向上推演至body標簽仍未找到任何內容模型非透明的父級元素，則該透明元素內部可包含任何Flow元素。 ##### 正確嵌套標簽 元素的嵌套規則和頁面頭部申明的DTD有著千絲萬縷的關系，通過了解HTML5的元素分類與內容模型，我們能更清楚的指導我們元素的嵌套關系。雖然大部分瀏覽器都有容錯機制，寫出來的代碼在瀏覽器下表現沒有什么異樣，但作為一個專業開發人員，我們必須對待自己的代碼應該一絲不茍，即使HTML5的胸襟很寬廣，但我們更應該去遵從W3C，因為只有標準健壯的代碼，才會有更好的擴展與兼容。 因此a標簽內是否合可以包含div標簽要看其父元素的 content model 和其內容的 categories。比如我們要看 p > ins > a > div 是否合法，過程是這樣的：p 元素的 content model 是 phrasing content，ins 本身屬于 phrasing content 故可以嵌套；ins 元素的 content model 是 transparent，故在此時里面是否能有 a 需檢查 p > a 的合法性；a 元素也屬于 phrasing content，故 p > ins > a 合法；a 元素的 content model 也是 transparent，故此時里面包含 div 的合法性向上傳遞，檢查 ins > div 又向上傳遞，變成檢查 p > div；div 不屬于 phrasing content，所以這個嵌套是不合法的。