HTML元素嵌套嵌套錯(cuò)誤可能引起的問(wèn)題

嵌套錯(cuò)誤可能引起的問(wèn)題

在我們使用各種瀏覽器時(shí)，時(shí)常發(fā)現(xiàn)即使不按照標(biāo)準(zhǔn)去嵌套也不會(huì)有大的錯(cuò)誤問(wèn)題，這就給我們帶來(lái)了一個(gè)思考：嵌套錯(cuò)誤到底會(huì)不會(huì)有問(wèn)題？

舉個(gè)栗子1：開(kāi)始與結(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é)果：

通過(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ō)瀏覽器解析出來(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ò)誤。

嚴(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)。

瀏覽器的容錯(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的胸襟很寬廣。

擁抱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è)瀏覽器廠商拋開(kāi)彼此的敵意共同制定新的標(biāo)準(zhǔn)。不然，也許你會(huì)像90年代那樣，JS引用一個(gè)元素都需要為某個(gè)瀏覽器寫一套自己的代碼。

WEB標(biāo)準(zhǔn)只會(huì)使我們吃飯變得更香，睡眠變得更好，新的技術(shù)或標(biāo)準(zhǔn)會(huì)推動(dòng)我們?nèi)ジ挥袩崆榈腸oding，而不是每天在重復(fù)勞動(dòng)。

補(bǔ)充一些標(biāo)準(zhǔn)的常用鏈接：

W3C國(guó)際站：http://www.w3.org/

W3C中國(guó)：http://www.chinaw3c.org/

W3C HTML5：http://www.w3.org/TR/html5/