HTML元素嵌套嵌套錯誤可能引起的問題

嵌套錯誤可能引起的問題

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

舉個(gè)栗子1：開始與結(jié)束標(biāo)簽嵌套錯誤

<div><h2>內(nèi)容</div></h2>

測試結(jié)果：

舉個(gè)栗子2：<p>元素嵌套<div>元素

<p><div>內(nèi)容</div></p>

測試結(jié)果：

舉個(gè)栗子3：列表元素<li>兄弟元素為<div>

<ul><li>內(nèi)容</li><div>內(nèi)容</div></ul>

測試結(jié)果：

舉個(gè)栗子4：<h2>元素嵌套<div>元素

<h2><div>內(nèi)容</div></h2>

測試結(jié)果：

舉個(gè)栗子5：<a>元素嵌套<a>元素

<a href=""><a href="">內(nèi)容</a></a>

測試結(jié)果：

通過上述栗子，我們總結(jié)如下：

• 元素開始與結(jié)束標(biāo)簽嵌套錯誤，頁面可以在大部分瀏覽器被正常解析，IE9會出現(xiàn)解析錯誤
• 在<p>元素內(nèi)嵌入<div>等元素造成所有瀏覽器的解析錯誤
• 在<h1>~<h6>元素內(nèi)嵌入<div>等元素所有瀏覽器可以解析正常
• 在<a>元素內(nèi)嵌入<a>元素會導(dǎo)致所有瀏覽器的解析錯誤
• 在列表元素<li><dt><dd>等插入非列表兄弟元素會導(dǎo)致IE6\IE7的解析錯誤

其實(shí)，這里說解析錯誤并不是很合理，應(yīng)該是說瀏覽器解析出來的結(jié)果和我們期望的結(jié)果不一致，但任何的嵌套錯誤都不會導(dǎo)致頁面呈現(xiàn)有很大的出錯。

我們知道JS代碼如果寫的有語法錯誤，瀏覽器的JS解釋器就會拒絕執(zhí)行并且報(bào)錯，而瀏覽器在遇到不符合語法規(guī)定的HTML代碼時(shí)則會千方百計(jì)將其呈現(xiàn)出來。

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

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

嚴(yán)格嵌套約束規(guī)則：

• a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)
• <p>里面不可以嵌套<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等
• 暫時(shí)沒有發(fā)現(xiàn)更多，有的歡迎告訴我

語義嵌套約束：

每個(gè)元素基本都有自己的嵌套規(guī)則（即父元素可以是什么，子元素可以是什么），除了嚴(yán)格嵌套約束之外的一些規(guī)則就是語義嵌套約束，對于語義嵌套約束，如果不遵守，頁面可能正常，但也可能解析錯誤，這和下面要講的容錯機(jī)制有關(guān)。

瀏覽器的容錯機(jī)制

并不是每位同學(xué)在寫完頁面后去做合法性檢查，因此瀏覽器廠商不得不讓它們的瀏覽器以盡可能寬松的方式去處理網(wǎng)頁，每個(gè)瀏覽器內(nèi)核中都有相當(dāng)一部分代碼專門用來處理那些含糊不清的html標(biāo)記及嵌套，并且會去猜測前端們到底想如何呈現(xiàn)網(wǎng)頁，這是瀏覽器的容錯機(jī)制。

這其實(shí)在告訴我們，我們寫出來的HTML代碼不符合W3C規(guī)范可能最終呈現(xiàn)出來沒有異樣，但那其實(shí)是瀏覽器的一種容錯機(jī)制，我們沒有理由讓自己以一個(gè)隨性的態(tài)度去coding，對待自己的代碼應(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)該敞開胸懷去擁抱，而不是排斥。

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

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

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

W3C國際站：http://www.w3.org/

W3C中國：http://www.chinaw3c.org/

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