先來(lái)看以下這樣一段代碼：
<ul> <li><h4><a href=""><div></div></a></h4></li> </ul>
當(dāng)然，我是不會(huì)告訴你這段代碼來(lái)自于FACEBOOK的 ，各位認(rèn)為以上元素的嵌套有沒(méi)有問(wèn)題呢？我們會(huì)在后面討論這個(gè)。
HTML4/XHTML的嵌套規(guī)則
在我們的印象中會(huì)有這樣的嵌套規(guī)則：
內(nèi)聯(lián)元素不能嵌套塊元素<p>元素和<h1~6>元素不能嵌套塊元素
那么到底什么是塊元素，什么是內(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.
我們可以這樣理解：塊元素一般都從新行開(kāi)始，內(nèi)聯(lián)元素在一行內(nèi)顯示，我們也可以通過(guò)CSS屬性display的'inline' 或 ' block' 來(lái)改變?cè)貫閮?nèi)聯(lián)元素或塊元素，當(dāng)然這是CSS中對(duì)元素的分類(lèi)，顯然用 'display' 的屬性值來(lái)對(duì)html元素進(jìn)行分類(lèi)是不嚴(yán)謹(jǐn)?shù)摹?/p>
如果按照上述規(guī)則來(lái)講，那么FACEBOOK的做法就是一種錯(cuò)誤的做法，因?yàn)樗趦?nèi)聯(lián)元素<a>元素中嵌套了塊元素元素<div>，但是細(xì)心的讀者應(yīng)該會(huì)發(fā)現(xiàn)上述規(guī)則是基于HTML4/xHTML1的strict模式，而FACEBOOK現(xiàn)在已經(jīng)統(tǒng)一使用了html5的doctype，那么這個(gè)規(guī)則到底還是是否適用？
HTML5的元素嵌套規(guī)則
元素的嵌套規(guī)則和頁(yè)面頭部申明的DTD有著千絲萬(wàn)縷的關(guān)系，DTD基礎(chǔ)請(qǐng)查看我之前寫(xiě)的文章《DTD詳解》，那么在最新的HTML5規(guī)范中是否對(duì)元素嵌套有著新的規(guī)范呢？
讓我們先了解下W3C在最新的HTML5規(guī)范中對(duì)元素的分類(lèi)方式：
如上圖，元素的分類(lèi)不再是塊元素或內(nèi)聯(lián)元素這樣來(lái)分類(lèi)（其實(shí)從來(lái)就沒(méi)有這樣分），而是按照如下分類(lèi)來(lái)分：Flow（流式元素）、Heading（標(biāo)題元素）、Sectioning（章節(jié)元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元數(shù)據(jù)元素）。
Flow（流式元素）
在應(yīng)用程序和文檔的主體部分中使用的大部分元素都被分類(lèi)為流式元素。
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）（無(wú)論是明確的使用章節(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（交互元素）
交互式元素是專(zhuān)門(mén)用于與用戶交互的元素。
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ù)元素是可以被用于說(shuō)明其他內(nèi)容的表現(xiàn)或行為，或者在當(dāng)前文檔和其他文檔之間建立聯(lián)系的元素
base，command，link，meta，noscript，script，style，title
各分類(lèi)會(huì)有交叉或重疊的現(xiàn)象，這說(shuō)明在html5中，元素可能屬于上述所有分類(lèi)中的一個(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」說(shuō)明該元素的類(lèi)別，「Contexts in which this element can be used」說(shuō)明該元素能在何種場(chǎng)景下被使用，也就是它的父元素是什么，「Content model」說(shuō)明該元素可以包含的內(nèi)容是什么，由于頁(yè)面中的元素是層層嵌套的，一個(gè)元素有可能既是父元素同時(shí)也是子元素的角色，所以下面我們以「Content model」也就是可包含的子元素做討論。
那么對(duì)于h1~h6元素：
- 它們同時(shí)屬于Flow content 、Heading content 和 Palpable content三個(gè)分類(lèi)
- 它們的父元素可以是<hgroup>，同時(shí)那些子元素是流式元素的元素也可以作為h1-h6元素的父元素
- 它們?cè)试S的子元素是段落式元素
例子(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分類(lèi)
- 父元素必須是那些子元素為段落式元素的元素
- 允許的子元素是流式元素
<div>元素允許的子元素是流式元素，流式元素基本涵括了頁(yè)面中的大部分元素，所以我們?cè)谟?lt;div>時(shí)可以不用擔(dān)心嵌套錯(cuò)誤的問(wèn)題。
但對(duì)于<h1>~<h6>元素，它們?cè)试S的子元素為段落式元素，而段落式元素并不包含諸如<div>、<p>、<ul><ol>之類(lèi)的元素，這就說(shuō)明按照html5的規(guī)范，是不允許在標(biāo)題元素內(nèi)部嵌入<div>、<p>、<ul><ol>之類(lèi)的元素。
例子(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分類(lèi)
- 父元素必須是那些子元素為段落式元素的元素
- 允許的子元素是以它的父元素允許的子元素為準(zhǔn)，但不能包含交互式元素
這樣看<a>元素還是挺有意思的，允許的子元素要看它的父元素所能包含的子元素。
再來(lái)看文章開(kāi)頭中提到的代碼
<ul> <li><h4><a href=""><div></div></a></h4></li> </ul>
這時(shí)<a>的父元素為<h4>，對(duì)于<h1>~<h6>的標(biāo)題元素上面已經(jīng)提過(guò)，允許的子元素是段落式元素，那么此時(shí)對(duì)于<a>允許的子元素即為段落式元素，而段落式元素中是不包含<div>元素的，所以FCAEBOOK這樣的嵌套方法是錯(cuò)誤的！
讓我們來(lái)把代碼做一下修改：
<ul> <li><div><a href=""><div></div></a></div></li> </ul>
這時(shí)<a>的父元素為<div>，而<div>元素允許的子元素是流式元素，流式元素中包含<div>元素，所以這樣的情形下在<a>里面嵌套<div>就是正確的做法！
嵌套錯(cuò)誤可能引起的問(wèn)題
上面講了HTML5對(duì)元素新的分類(lèi)方式和以<h1>~<h6>、<div>、<a>元素舉例講述了各自的嵌套規(guī)則，但FACEBOOK即使不按照標(biāo)準(zhǔn)去嵌套也不會(huì)有大的錯(cuò)誤問(wèn)題，這就給我們帶來(lái)了一個(gè)思考：嵌套錯(cuò)誤到底會(huì)不會(huì)有問(wèn)題？
例子(1)：開(kāi)始與結(jié)束標(biāo)簽嵌套錯(cuò)誤
<div><h2>內(nèi)容</div></h2>
測(cè)試結(jié)果：
例子(2)：<p>元素嵌套<div>元素
<p><div>內(nèi)容</div></p>
測(cè)試結(jié)果：
例子(3)：列表元素<li>兄弟元素為<div>
<ul><li>內(nèi)容</li><div>內(nèi)容</div></ul>
測(cè)試結(jié)果：
例子(4)：<h2>元素嵌套<div>元素
<h2><div>內(nèi)容</div></h2>
測(cè)試結(jié)果：
例子(5)：<a>元素嵌套<a>元素
<a href=""><a href="">內(nèi)容</a></a>
測(cè)試結(jié)果：
通過(guò)上述例子，我們總結(jié)如下：
-
元素開(kāi)始與結(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)致IE6\IE7的解析錯(cuò)誤
其實(shí)，這里說(shuō)解析錯(cuò)誤并不是很合理，應(yīng)該是說(shuō)
我們知道JS代碼如果寫(xiě)的有語(yǔ)法錯(cuò)誤，
嚴(yán)格嵌套約束、語(yǔ)義嵌套約束
通過(guò)上面的示例我們發(fā)現(xiàn)在<p>元素里嵌套<div>元素或者<a>元素里<a>元素會(huì)導(dǎo)致所有的
嚴(yán)格嵌套約束規(guī)則：
- a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)
- <p>里面不可以嵌套<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等
- 暫時(shí)沒(méi)有發(fā)現(xiàn)更多，有的歡迎告訴我
語(yǔ)義嵌套約束：
每個(gè)元素基本都有自己的嵌套規(guī)則（即父元素可以是什么，子元素可以是什么），除了嚴(yán)格嵌套約束之外的一些規(guī)則就是語(yǔ)義嵌套約束，對(duì)于語(yǔ)義嵌套約束，如果不遵守，頁(yè)面可能正常，但也可能解析錯(cuò)誤，這和下面要講的容錯(cuò)機(jī)制有關(guān)。
并不是每位同學(xué)在寫(xiě)完頁(yè)面后去做合法性檢查，因此
這其實(shí)在告訴我們，我們寫(xiě)出來(lái)的HTML代碼不符合W3C規(guī)范可能最終呈現(xiàn)出來(lái)沒(méi)有異樣，但那其實(shí)是
擁抱WEB標(biāo)準(zhǔn)
原本我們認(rèn)為從HTML4到XHTML是一個(gè)時(shí)代，現(xiàn)在又從XHTML跨到了HTML5，新時(shí)代新標(biāo)準(zhǔn)的誕生，我們應(yīng)該敞開(kāi)胸懷去擁抱，而不是排斥。
你關(guān)注或不關(guān)注，標(biāo)準(zhǔn)就在那里，只增不減。我們應(yīng)該感謝W3C這樣一個(gè)組織，讓各個(gè)
WEB標(biāo)準(zhǔn)只會(huì)使我們吃飯變得更香，睡眠變得更好，新的技術(shù)或標(biāo)準(zhǔn)會(huì)推動(dòng)我們?nèi)ジ挥袩崆榈腸oding，而不是每天在重復(fù)勞動(dòng)。