解析HTML5頁(yè)面元素的嵌套規(guī)則及引起的錯(cuò)誤問(wèn)題

時(shí)間：2022-05-25 18:27:01 | 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

時(shí)間：2022-05-25 18:27:01 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

據(jù)統(tǒng)計(jì)在2013年內(nèi)全球有近10億手機(jī)用戶使用了支持HTML5瀏覽器，同時(shí)HTML Web開(kāi)發(fā)者數(shù)量將達(dá)到200萬(wàn)。毫無(wú)疑問(wèn)，HTML5將成為未來(lái)5-10年內(nèi)，移動(dòng)互聯(lián)網(wǎng)領(lǐng)域的主宰者。

HTML5之所以能成為近幾年的熱點(diǎn)話題，是因?yàn)镠TML5提供了一些新的元素和屬性，例如<nav>（網(wǎng)站導(dǎo)航塊）和<footer>。這種標(biāo)簽將有利于搜索引擎的索引整理，同時(shí)更好的幫助小屏幕裝置和視障人士使用，更便于手機(jī)用戶的使用。除此之外，HTML5還為其他瀏覽要素提供了新的功能，隨后我將會(huì)在億企邦上為大家逐個(gè)來(lái)介紹這些新功能。今天我要在億企邦上介紹的是HTML5頁(yè)面元素的嵌套規(guī)則。

一、回顧HTML4/XHTML的嵌套規(guī)則

在我們的印象中會(huì)有這樣的嵌套規(guī)則：

內(nèi)聯(lián)元素不能嵌套塊元素<p>元素和<h1~6>元素不能嵌套塊元素

看到這里你或許會(huì)有疑問(wèn)：到底什么是塊元素，什么是內(nèi)聯(lián)元素呢？

在此億企邦還特意查詢了官網(wǎng)上的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.

對(duì)于以上定義，我們可以這樣理解：塊元素一般都從新行開(kāi)始，內(nèi)聯(lián)元素在一行內(nèi)顯示，我們也可以通過(guò)CSS屬性display的'inline' 或 ' block' 來(lái)改變?cè)貫閮?nèi)聯(lián)元素或塊元素，當(dāng)然這是CSS中對(duì)元素的分類，顯然用 'display' 的屬性值來(lái)對(duì)html元素進(jìn)行分類是不嚴(yán)謹(jǐn)?shù)摹?br>
如果按照上述規(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)系，那么在最新的HTML5規(guī)范中是否對(duì)元素嵌套有著新的規(guī)范呢？

讓我們先了解下W3C在最新的HTML5規(guī)范中對(duì)元素的分類方式，如下圖所示：

由上圖我們可以看出，元素的分類不再是塊元素或內(nèi)聯(lián)元素這樣來(lái)分類（其實(shí)從來(lái)就沒(méi)有這樣分），而是按照如下分類來(lái)分：Flow（流式元素）、Heading（標(biāo)題元素）、Sectioning（章節(jié)元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元數(shù)據(jù)元素）。

1、HTML5規(guī)范中的最新元素介紹

（1）、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

（2）、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

（3）、Sectioning（章節(jié)元素）

章節(jié)式元素是用于定義標(biāo)題及頁(yè)腳范圍的元素。

article， aside， nav， section

（4）、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

（5）、Embedded（嵌入元素）

嵌入式元素是引用或插入到文檔中其他資源的元素。

audio， canvas， embed， iframe， img， math， object， svg， video

（6）、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屬性）

（7）、Metadata（元數(shù)據(jù)元素）

元數(shù)據(jù)元素是可以被用于說(shuō)明其他內(nèi)容的表現(xiàn)或行為，或者在當(dāng)前文檔和其他文檔之間建立聯(lián)系的元素。

base，command，link，meta，noscript，script，style，title

各分類會(huì)有交叉或重疊的現(xiàn)象，這說(shuō)明在html5中，元素可能屬于上述所有分類中的一個(gè)或多個(gè)。

2、舉例分析<h1>~<h6>、<div>、<a>元素

（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ō)明該元素的類別，「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è)分類；

它們的父元素可以是<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分類；

父元素必須是那些子元素為段落式元素的元素；

允許的子元素是流式元素。

<div>元素允許的子元素是流式元素，流式元素基本涵括了頁(yè)面中的大部分元素，所以我們?cè)谟?lt;div>時(shí)可以不用擔(dān)心嵌套錯(cuò)誤的問(wèn)題。

但對(duì)于<h1>~<h6>元素，它們?cè)试S的子元素為段落式元素，而段落式元素并不包含諸如<div>、<p>、<ul><ol>之類的元素，這就說(shuō)明按照html5的規(guī)范，是不允許在標(biāo)題元素內(nèi)部嵌入<div>、<p>、<ul><ol>之類的元素。

（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>元素還是挺有意思的，允許的子元素要看它的父元素所能包含的子元素。

接下來(lá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ì)元素新的分類方式和以<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ò)上述5個(gè)例子，億企邦總結(jié)了如下5個(gè)觀點(diǎn)：

（1）、元素開(kāi)始與結(jié)束標(biāo)簽嵌套錯(cuò)誤，頁(yè)面可以在大部分瀏覽器被正常解析，IE9會(huì)出現(xiàn)解析錯(cuò)誤。

（2）、在<p>元素內(nèi)嵌入<div>等元素造成所有瀏覽器的解析錯(cuò)誤。

（3）、在<h1>~<h6>元素內(nèi)嵌入<div>等元素所有瀏覽器可以解析正常。

（4）、在<a>元素內(nèi)嵌入<a>元素會(huì)導(dǎo)致所有瀏覽器的解析錯(cuò)誤。

（5）、在列表元素<li><dt><dd>等插入非列表兄弟元素會(huì)導(dǎo)致IE6/IE7的解析錯(cuò)誤。

其實(shí)，億企邦覺(jué)得這里說(shuō)解析錯(cuò)誤并不是很合理，應(yīng)該是說(shuō)瀏覽器解析出來(lái)的結(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)出來(lái)。

四、嚴(yán)格嵌套約束、語(yǔ)義嵌套約束

通過(guò)上面的示例我們發(fā)現(xiàn)在<p>元素里嵌套<div>元素或者<a>元素里<a>元素會(huì)導(dǎo)致所有的瀏覽器都解析錯(cuò)誤，這其實(shí)是W3C規(guī)范的嚴(yán)格嵌套約束，嚴(yán)格嵌套約束要求必須去遵守，不然就會(huì)導(dǎo)致所有瀏覽器的解析錯(cuò)誤。

1、嚴(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)更多的了，如果有誰(shuí)發(fā)現(xiàn)更多點(diǎn)的話歡迎通過(guò)億企邦來(lái)告訴我。

2、語(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)一部分代碼專門用來(lái)處理那些含糊不清的html標(biāo)記及嵌套，并且會(huì)去猜測(cè)前端們到底想如何呈現(xiàn)網(wǎng)頁(yè)，這是瀏覽器的容錯(cuò)機(jī)制。

這其實(shí)在告訴我們，我們寫出來(lái)的HTML代碼不符合W3C規(guī)范可能最終呈現(xiàn)出來(lái)沒(méi)有異樣，但那其實(shí)是瀏覽器的一種容錯(cuò)機(jī)制，我們沒(méi)有理由讓自己以一個(gè)隨性的態(tài)度去coding，對(duì)待自己的代碼應(yīng)該一絲不茍，即使HTML5的胸襟很寬廣。

億企邦點(diǎn)評(píng)：

原本我認(rèn)為從HTML4到XHTML是一個(gè)時(shí)代，現(xiàn)在又從XHTML跨到了HTML5，新時(shí)代新標(biāo)準(zhǔn)的誕生，我們應(yīng)該敞開(kāi)胸懷去擁抱，而不是排斥。

因?yàn)槟汴P(guān)注或不關(guān)注，標(biāo)準(zhǔn)就在那里，只增不減。所以我們更應(yīng)該感謝W3C這樣一個(gè)組織，讓各個(gè)瀏覽器廠商拋開(kāi)彼此的敵意共同制定新的標(biāo)準(zhǔn)。不然，也許你會(huì)像90年代那樣，JS引用一個(gè)元素都需要為某個(gè)瀏覽器寫一套自己的代碼。