HTML4的元素嵌套規(guī)則
在我們的印象中會(huì)有這樣的嵌套規(guī)則：
內(nèi)聯(lián)元素不能嵌套塊元素
<p>元素和<h1~6>元素不能嵌套塊元素
詳見 Jukka Korpela 的 Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict) 。
那么到底什么是塊元素，什么是內(nèi)聯(lián)元素？
以下是W3C CSS2.1規(guī)范中對(duì)塊元素和內(nèi)聯(lián)元素的定義：
**Block-level elements
** are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the ‘display’ property make an element block-level: ‘block’, ‘list-item’, and ‘table’.
**Inline-level elements
** are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the ‘display’ property make an element inline-level: ‘inline’, ‘inline-table’, and ‘inline-block’. Inline-level elements generate inline-level boxes
, which are boxes that participate in an inline formatting context.
我們可以這樣理解：塊元素一般都從新行開始，內(nèi)聯(lián)元素在一行內(nèi)顯示，我們也可以通過CSS屬性display的’inline’ 或 ‘ block’ 來改變?cè)貫閮?nèi)聯(lián)元素或塊元素，當(dāng)然這是CSS中對(duì)元素的分類，顯然用 ‘display’ 的屬性值來對(duì)html元素進(jìn)行分類是不嚴(yán)謹(jǐn)?shù)摹?/p>
HTML5的元素嵌套規(guī)則
讓我們先了解下W3C在最新的HTML5規(guī)范中對(duì)元素的分類方式：
如上圖，元素的分類不再是塊元素或內(nèi)聯(lián)元素這樣來分類（其實(shí)從來就沒有這樣分），而是按照如下分類來分：Flow（流式元素）、Heading（標(biāo)題元素）、Sectioning（章節(jié)元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元數(shù)據(jù)元素）。
Flow（流式元素）
在應(yīng)用程序和文檔的主體部分中使用的大部分元素都被分類為流式元素。
a， abbr， address， area（如果它是map元素的后 裔）， 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（如 果該元素設(shè)置了scoped屬 性）， sub， sup， svg， table，textarea， time， u， ul， var， video， wbr， text
Heading（標(biāo)題元素）
標(biāo)題式元素定義一個(gè)區(qū)塊/章節(jié)（section）（無論是明確的使用章節(jié)式內(nèi)容的元素標(biāo)記，或者標(biāo)題式內(nèi)容自身所隱含的）的標(biāo)題。
h1， h2， h3， h4， h5， h6， hgroup
Sectioning（章節(jié)元素）
章節(jié)式元素是用于定義標(biāo)題及頁(yè)腳范圍的元素。
article， aside， nav， section
Phrasing（段落元素）
段落式元素是文檔中的文本、標(biāo)記段落級(jí)文本的元素。
a（如果其只包含段落式元素）， abbr， area（如果它是map元素的后 裔）， 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
Embedded（嵌入元素）
嵌入式元素是引用或插入到文檔中其他資源的元素。
audio， canvas， embed， iframe， img， math， object， svg， video
Interactive（交互元素）
交互式元素是專門用于與用戶交互的元素。
a， audio（如果設(shè)置了controls屬 性）， button， details， embed， iframe， img（如果設(shè)置了usemap屬性）， input（如果type屬性不為 hidden狀態(tài)）， keygen， label， menu（如果type屬性為toolbar狀態(tài)），object（如果設(shè)置了usemap屬 性）， select， textarea， video（如果設(shè)置了controls屬性）
Metadata（元數(shù)據(jù)元素）
元數(shù)據(jù)元素是可以被用于說明其他內(nèi)容的表現(xiàn)或行為，或者在當(dāng)前文檔和其他文檔之間建立聯(lián)系的元素
base，command，link，meta，noscript，script，style，title
各分類會(huì)有交叉或重疊的現(xiàn)象，這說明在html5中，元素可能屬于上述所有分類中的一個(gè)或多個(gè)。
舉個(gè)栗子1：<h1>~<h6>元素：
Categories:
Flow content.
Heading content.
Palpable content.
Contexts in which this element can be used:As a child of an hgroup element.
Where flow content is expected.
Content model:
Phrasing content.
其中的「Categories」說明該元素的類別，「Contexts in which this element can be used」說明該元素能在何種場(chǎng)景下被使用，也就是它的父元素是什么，「Content model」說明該元素可以包含的內(nèi)容是什么，由于頁(yè)面中的元素是層層嵌套的，一個(gè)元素有可能既是父元素同時(shí)也是子元素的角色，所以下面我們以「Content model」也就是可包含的子元素做討論。
那么對(duì)于h1~h6元素：
它們同時(shí)屬于Flow content 、Heading content 和** Palpable content**三個(gè)分類；
它們的父元素可以是<hgroup>，同時(shí)那些子元素是流式元素的元素也可以作為h1-h6元素的父元素；
它們?cè)试S的子元素是段落式元素。
舉個(gè)栗子2：<div>元素
Categories:
Flow content.
Palpable content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Flow content.
對(duì)于<div>元素：
同時(shí)屬于Flow content 、** Palpable content**分類
父元素必須是那些子元素為段落式元素的元素
允許的子元素是流式元素
<div>元素允許的子元素是流式元素，流式元素基本涵括了頁(yè)面中的大部分元素，所以我們?cè)谟?lt;div>時(shí)可以不用擔(dān)心嵌套錯(cuò)誤的問題。
但對(duì)于<h1>~<h6>元素，它們?cè)试S的子元素為段落式元素，而段落式元素并不包含諸 如<div>、<p>、<ul>、<ol>之類的元素，這就說明按照html5的規(guī)范，是不允許在標(biāo)題元 素內(nèi)部嵌入<div>、<p>、<ul>、<ol>之類的元素。
舉個(gè)栗子3：<a>元素
Categories:
Flow content.
Phrasing content.
Interactive content.
Palpable content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Transparent, but there must be no interactive content descendant.
對(duì)于<a>元素：
同時(shí)屬于Flow content 、** Phrasing content、Interactive content、Palpable content**分類
父元素必須是那些子元素為段落式元素的元素
允許的子元素是以它的父元素允許的子元素為準(zhǔn)，但不能包含交互式元素
這樣看<a>元素還是挺有意思的，允許的子元素要看它的父元素所能包含的子元素。
再來看下面的代碼
<ul>
<li><h4><a href=""><div></div></a></h4></li>
</ul>
這時(shí)<a>的父元素為<h4>，對(duì)于<h1>~<h6>的標(biāo)題元素上面已經(jīng)提過，允許的子元素是 段落式元素，那么此時(shí)對(duì)于<a>允許的子元素即為段落式元素，而段落式元素中是不包含<div>元素的，所以這樣的嵌套方法是錯(cuò)誤的！
讓我們來把代碼做一下修改：
<ul>
<li><div><a href=""><div></div></a></div></li>
</ul>
這時(shí)<a>的父元素為<div>，而<div>元素允許的子元素是流式元素，流式元素中包含<div>元素，所以這樣的情形下在<a>里面嵌套<div>就是正確的做法！
嵌套錯(cuò)誤可能引起的問題
上面講了HTML5對(duì)元素新的分類方式和以<h1>~<h6>、<div>、<a>元素舉例講述 了各自的嵌套規(guī)則，但不按照標(biāo)準(zhǔn)去嵌套也不會(huì)有大的錯(cuò)誤問題，這就給我們帶來了一個(gè)思考：嵌套錯(cuò)誤到底會(huì)不會(huì)有問題？
舉個(gè)栗子1：開始與結(jié)束標(biāo)簽嵌套錯(cuò)誤
<div><h2>內(nèi)容</div></h2>
測(cè)試結(jié)果：
舉個(gè)栗子2：<p>元素嵌套<div>元素
<p><div>內(nèi)容</div></p>
測(cè)試結(jié)果：
舉個(gè)栗子3：列表元素<li>兄弟元素為<div>
<ul><li>內(nèi)容</li><div>內(nèi)容</div></ul>
測(cè)試結(jié)果：
舉個(gè)栗子4：<h2>元素嵌套<div>元素
<h2><div>內(nèi)容</div></h2>
測(cè)試結(jié)果：
舉個(gè)栗子5：<a>元素嵌套<a>元素
<a href=""><a href="">內(nèi)容</a></a>
測(cè)試結(jié)果：
通過上述栗子，我們總結(jié)如下：
元素開始與結(jié)束標(biāo)簽嵌套錯(cuò)誤，頁(yè)面可以在大部分瀏覽器被正常解析，IE9會(huì)出現(xiàn)解析錯(cuò)誤;
在
<p>元素內(nèi)嵌入<div>等元素造成所有瀏覽器的解析錯(cuò)誤;在
<h1>~<h6>元素內(nèi)嵌入<div>等元素所有瀏覽器可以解析正常;在
<a>元素內(nèi)嵌入<a>元素會(huì)導(dǎo)致所有瀏覽器的解析錯(cuò)誤;-
在列表元素
<li><dt><dd>等插入非列表兄弟元素會(huì)導(dǎo)致IE6IE7的解析錯(cuò)誤;其實(shí)，這里說解析錯(cuò)誤并不是很合理，應(yīng)該是說瀏覽器解析出來的結(jié)果和我們期望的結(jié)果不一致，但任何的嵌套錯(cuò)誤都不會(huì)導(dǎo)致頁(yè)面呈現(xiàn)有很大的出錯(cuò)。
我們知道JS代碼如果寫的有語(yǔ)法錯(cuò)誤，瀏覽器的JS解釋器就會(huì)拒絕執(zhí)行并且報(bào)錯(cuò)，而瀏覽器在遇到不符合語(yǔ)法規(guī)定的HTML代碼時(shí)則會(huì)千方百計(jì)將其呈現(xiàn)出來。
嚴(yán)格嵌套約束、語(yǔ)義嵌套約束
通過上面的示例我們發(fā)現(xiàn)在<p>元素里嵌套<div>元素或者<a>元素里<a>元素會(huì)導(dǎo)致所有的瀏覽器都解析錯(cuò)誤，這其實(shí)是W3C規(guī)范的嚴(yán)格嵌套約束，嚴(yán)格嵌套約束要求必須去遵守，不然就會(huì)導(dǎo)致所有瀏覽器的解析錯(cuò)誤。
嚴(yán)格嵌套約束規(guī)則：
a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)
<p>里面不可以嵌套<div>、<h1>~<h6>、<p>、<ul>/<ol> /<li>、<dl>/<dt>/<dd>、<form>等
語(yǔ)義嵌套約束：
每個(gè)元素基本都有自己的嵌套規(guī)則（即父元素可以是什么，子元素可以是什么），除了嚴(yán)格嵌套約束之外的一些規(guī)則就是語(yǔ)義嵌套約束，對(duì)于語(yǔ)義嵌套約束，如果不遵守，頁(yè)面可能正常，但也可能解析錯(cuò)誤，這和下面要講的容錯(cuò)機(jī)制有關(guān)。
瀏覽器的容錯(cuò)機(jī)制
并不是每位同學(xué)在寫完頁(yè)面后去做合法性檢查，因此瀏覽器廠商不得不讓它們的瀏覽器以盡可能寬松的方式去處理網(wǎng)頁(yè)，每個(gè)瀏覽器內(nèi)核中都有相當(dāng)一部分代碼專門用來處理那些含糊不清的html標(biāo)記及嵌套，并且會(huì)去猜測(cè)前端們到底想如何呈現(xiàn)網(wǎng)頁(yè)，這是瀏覽器的容錯(cuò)機(jī)制。
這其實(shí)在告訴我們，我們寫出來的HTML代碼不符合W3C規(guī)范可能最終呈現(xiàn)出來沒有異樣，但那其實(shí)是瀏覽器的一種容錯(cuò)機(jī)制，我們沒有理由讓自己以一個(gè)隨性的態(tài)度去coding，對(duì)待自己的代碼應(yīng)該一絲不茍，即使HTML5的胸襟很寬廣。
