HTML4中，元素被分成兩大類: inline(內(nèi)聯(lián)元素)與block(塊級元素)。但在實際的開發(fā)過程中，因為頁面表現(xiàn)的需要，前端工程師經(jīng)常把inline元素的display值設定為block(比如a標簽)，也經(jīng)常把block元素的display值設定為inline；之后更是出現(xiàn)了inline-block這一對外呈現(xiàn)inline、對內(nèi)呈現(xiàn)block的屬性。因此，簡單地把HTML元素劃分為inline與block已經(jīng)不再符合實際需求。

基于這種考慮，在HTML5中，標準制定者重新定義了HTML元素的分類，并根據(jù)這一新的分類定義了元素的內(nèi)容模型(Content Model) -- 對于一個元素而言，哪些子元素是合法的，而哪些子元素是非法的。

HTML5中，元素主要分為7類：

Metadata

Flow

Sectioning

Heading

Phrasing

Embedded

Interactive

這些分類集合互相之間也存在一定的交集(一個元素可以同時屬于多個分類)，其交集關(guān)系呈現(xiàn)為：

需要注意的是，HTML5中的這種元素分類與inline、block沒有任何關(guān)系，任何元素都可以在CSS中被定義為display:inline或者display:block。另外，除了這7大分類，還存在一些較小的分類，如Palpable、Script-Supporting等。

Metadata

顧名思義，Metadata元素意指那些定義文檔元數(shù)據(jù)信息的元素 — 其作用包括：影響文檔中其它節(jié)點的展現(xiàn)與行為、定義文檔與其它外部資源之間的關(guān)系等。以下元素屬于Metadata：base, link, meta, noscript, script, style, template, title。

Flow

所有可以放在body標簽內(nèi)，構(gòu)成文檔內(nèi)容的元素均屬于Flow元素。因此，除了base, link, meta, style, title等只能放在head標簽內(nèi)的元素外，剩下的所有元素均屬于Flow元素。

Sectioning

Sectioning意指定義頁面結(jié)構(gòu)的元素，具體包含以下四個：article, aside, nav, section。

Heading

所有標題元素屬于Heading，也即以下6個元素：h1, h2, h3, h4, h5, h6。

Phrasing

所有可以放在p標簽內(nèi)，構(gòu)成段落內(nèi)容的元素均屬于Phrasing元素。因此，所有Phrasing元素均屬于Flow元素。在HTML5標準文檔中，關(guān)于Phrasing元素的原始定義為：

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

對于這一定義，個人認為不應當使用“text”這一容易引起誤解的詞，事實上，一個元素即使不是文本，只要能包含在p標簽中成為段落內(nèi)容的一部分，就可以稱之為Phrasing元素。比如：audio、video、img、select、input等元素(經(jīng)測試，這些元素都可以放置在p標簽中)。一個不太精確的類比是：HTML5中的Phrasing元素大致就是HTML4中所定義的inline元素。

Phrasing元素內(nèi)部一般只能包含別的Phrasing元素。

關(guān)于Phrasing元素，Stackoverflow上有一個比較精彩的問答，可供參考。

Embedded

所有用于在網(wǎng)頁中嵌入外部資源的元素均屬于Embedded元素，具體包含以下9個：audio, video, img, canvas, svg, iframe, embed, object, math。

Interactive

所有與用戶交互有關(guān)的元素均屬于Interactive元素，包括a, input, textarea, select等。

內(nèi)容模型(Content Model)

根據(jù)以上元素分類，HTML5標準文檔定義了任何元素的內(nèi)容模型 — 對于該元素而言，何種子元素才是合法的。

比如，對于p元素而言，其內(nèi)容模型為Phrasing, 這意味著p元素只接受Phrasing元素為子元素，而對于像div這樣的非Phrasing元素則并不接受。類似的，li元素的內(nèi)容模型為Flow，因此任何可以放置在body中的元素都可以作為li元素的子元素。

值得注意的是，HTML5標準文檔在定義元素的內(nèi)容模型時，會使用一類特殊的分類：透明內(nèi)容模型(transparent) — 對于內(nèi)容模型為透明(transparent)的元素而言，其子元素的合法性由其父元素所決定；如果其父元素的內(nèi)容模型仍為透明，則查看其祖父元素的情況，并依此類推；如果向上推演至body標簽仍未找到任何內(nèi)容模型非透明的父級元素，則該透明元素內(nèi)部可包含任何Flow元素。

典型的具有透明內(nèi)容模型的元素為a元素。因此，當a出現(xiàn)在p標簽中時，a不能接受div作為子元素；而當a出現(xiàn)在div標簽中時，a可以接受div作為子元素。對此，知乎上有一個問答解釋了這種現(xiàn)象：http://www.zhihu.com/question/34952563

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的阅读类型HTML,W3C HTML5标准阅读笔记 – 元素分类与内容模型(Content Model)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。