嵌套錯誤可能引起的問題

在我們使用各種瀏覽器時，時常發現即使不按照標準去嵌套也不會有大的錯誤問題，這就給我們帶來了一個思考：嵌套錯誤到底會不會有問題？

舉個栗子1：開始與結束標簽嵌套錯誤

<div><h2>內容</div></h2>

測試結果：

舉個栗子2：<p>元素嵌套<div>元素

<p><div>內容</div></p>

測試結果：

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

<ul><li>內容</li><div>內容</div></ul>

測試結果：

舉個栗子4：<h2>元素嵌套<div>元素

<h2><div>內容</div></h2>

測試結果：

舉個栗子5：<a>元素嵌套<a>元素

<a href=""><a href="">內容</a></a>

測試結果：

通過上述栗子，我們總結如下：

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

其實，這里說解析錯誤并不是很合理，應該是說瀏覽器解析出來的結果和我們期望的結果不一致，但任何的嵌套錯誤都不會導致頁面呈現有很大的出錯。

我們知道JS代碼如果寫的有語法錯誤，瀏覽器的JS解釋器就會拒絕執行并且報錯，而瀏覽器在遇到不符合語法規定的HTML代碼時則會千方百計將其呈現出來。

嚴格嵌套約束、語義嵌套約束

通過上面的示例我們發現在<p>元素里嵌套<div>元素或者<a>元素里<a>元素會導致所有的瀏覽器都解析錯誤，這其實是W3C規范的嚴格嵌套約束，嚴格嵌套約束要求必須去遵守，不然就會導致所有瀏覽器的解析錯誤。

嚴格嵌套約束規則：

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

語義嵌套約束：

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

瀏覽器的容錯機制

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

這其實在告訴我們，我們寫出來的HTML代碼不符合W3C規范可能最終呈現出來沒有異樣，但那其實是瀏覽器的一種容錯機制，我們沒有理由讓自己以一個隨性的態度去coding，對待自己的代碼應該一絲不茍，即使HTML5的胸襟很寬廣。

擁抱WEB標準

原本我們認為從HTML4到XHTML是一個時代，現在又從XHTML跨到了HTML5，新時代新標準的誕生，我們應該敞開胸懷去擁抱，而不是排斥。

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

WEB標準只會使我們吃飯變得更香，睡眠變得更好，新的技術或標準會推動我們去富有熱情的coding，而不是每天在重復勞動。