HTML4的元素嵌套規(guī)則
在我們的印象中會有這樣的嵌套規(guī)則：
內(nèi)聯(lián)元素不能嵌套塊元素
<p>元素和<h1~6>元素不能嵌套塊元素
詳見 Jukka Korpela 的 Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict) 敛纲。
那么到底什么是塊元素，什么是內(nèi)聯(lián)元素？
以下是W3C CSS2.1規(guī)范中對塊元素和內(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.
我們可以這樣理解：塊元素一般都從新行開始，內(nèi)聯(lián)元素在一行內(nèi)顯示昭雌，我們也可以通過CSS屬性display的’inline’ 或 ‘ block’ 來改變元素為內(nèi)聯(lián)元素或塊元素王滤，當(dāng)然這是CSS中對元素的分類，顯然用 ‘display’ 的屬性值來對html元素進行分類是不嚴(yán)謹(jǐn)?shù)摹?/p>
HTML5的元素嵌套規(guī)則
讓我們先了解下W3C在最新的HTML5規(guī)范中對元素的分類方式：
如上圖乡小，元素的分類不再是塊元素或內(nèi)聯(lián)元素這樣來分類（其實從來就沒有這樣分）擎淤，而是按照如下分類來分：Flow（流式元素）奢啥、Heading（標(biāo)題元素）、Sectioning（章節(jié)元素）揉燃、Phrasing（段落元素）扫尺、Embedded（嵌入元素）筋栋、Interactive（交互元素）炊汤、Metadata（元數(shù)據(jù)元素）。
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
Heading（標(biāo)題元素）
標(biāo)題式元素定義一個區(qū)塊/章節(jié)（section）（無論是明確的使用章節(jié)式內(nèi)容的元素標(biāo)記得哆，或者標(biāo)題式內(nèi)容自身所隱含的）的標(biāo)題脯颜。
h1被碗， h2驳阎， h3， h4渗柿， h5饱亮， h6矾芙， hgroup
Sectioning（章節(jié)元素）
章節(jié)式元素是用于定義標(biāo)題及頁腳范圍的元素。
article近上， aside剔宪， nav， section
Phrasing（段落元素）
段落式元素是文檔中的文本、標(biāo)記段落級文本的元素葱绒。
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（交互元素）
交互式元素是專門用于與用戶交互的元素临谱。
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ù)元素是可以被用于說明其他內(nèi)容的表現(xiàn)或行為仑濒，或者在當(dāng)前文檔和其他文檔之間建立聯(lián)系的元素
base，command偷遗，link墩瞳，meta，noscript氏豌，script喉酌，style，title
各分類會有交叉或重疊的現(xiàn)象泵喘，這說明在html5中泪电，元素可能屬于上述所有分類中的一個或多個。
舉個栗子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」說明該元素的類別纪铺，「Contexts in which this element can be used」說明該元素能在何種場景下被使用相速，也就是它的父元素是什么，「Content model」說明該元素可以包含的內(nèi)容是什么鲜锚，由于頁面中的元素是層層嵌套的突诬，一個元素有可能既是父元素同時也是子元素的角色，所以下面我們以「Content model」也就是可包含的子元素做討論芜繁。
那么對于h1~h6元素：
它們同時屬于Flow content 旺隙、Heading content 和** Palpable content**三個分類；
它們的父元素可以是<hgroup>骏令，同時那些子元素是流式元素的元素也可以作為h1-h6元素的父元素催束；
它們允許的子元素是段落式元素。
舉個栗子2：<div>元素
Categories:
Flow content.
Palpable content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Flow content.
對于<div>元素：
同時屬于Flow content 伏社、** Palpable content**分類
父元素必須是那些子元素為段落式元素的元素
允許的子元素是流式元素
<div>元素允許的子元素是流式元素抠刺，流式元素基本涵括了頁面中的大部分元素，所以我們在用<div>時可以不用擔(dān)心嵌套錯誤的問題摘昌。
但對于<h1>~<h6>元素速妖，它們允許的子元素為段落式元素，而段落式元素并不包含諸 如<div>聪黎、<p>罕容、<ul>、<ol>之類的元素稿饰，這就說明按照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.
對于<a>元素：
同時屬于Flow content 侣姆、** Phrasing content生真、Interactive content沉噩、Palpable content**分類
父元素必須是那些子元素為段落式元素的元素
允許的子元素是以它的父元素允許的子元素為準(zhǔn)，但不能包含交互式元素
這樣看<a>元素還是挺有意思的柱蟀，允許的子元素要看它的父元素所能包含的子元素川蒙。
再來看下面的代碼
<ul>
<li><h4><a href=""><div></div></a></h4></li>
</ul>
這時<a>的父元素為<h4>，對于<h1>~<h6>的標(biāo)題元素上面已經(jīng)提過长已，允許的子元素是 段落式元素畜眨，那么此時對于<a>允許的子元素即為段落式元素，而段落式元素中是不包含<div>元素的术瓮，所以這樣的嵌套方法是錯誤的康聂！
讓我們來把代碼做一下修改：
<ul>
<li><div><a href=""><div></div></a></div></li>
</ul>
這時<a>的父元素為<div>，而<div>元素允許的子元素是流式元素斤斧，流式元素中包含<div>元素早抠，所以這樣的情形下在<a>里面嵌套<div>就是正確的做法！
嵌套錯誤可能引起的問題
上面講了HTML5對元素新的分類方式和以<h1>~<h6>撬讽、<div>蕊连、<a>元素舉例講述 了各自的嵌套規(guī)則，但不按照標(biāo)準(zhǔn)去嵌套也不會有大的錯誤問題游昼，這就給我們帶來了一個思考：嵌套錯誤到底會不會有問題甘苍？
舉個栗子1：開始與結(jié)束標(biāo)簽嵌套錯誤
<div><h2>內(nèi)容</div></h2>
測試結(jié)果：
舉個栗子2：<p>元素嵌套<div>元素
<p><div>內(nèi)容</div></p>
測試結(jié)果：
舉個栗子3：列表元素<li>兄弟元素為<div>
<ul><li>內(nèi)容</li><div>內(nèi)容</div></ul>
測試結(jié)果：
舉個栗子4：<h2>元素嵌套<div>元素
<h2><div>內(nèi)容</div></h2>
測試結(jié)果：
舉個栗子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)致IE6IE7的解析錯誤;其實，這里說解析錯誤并不是很合理廊佩，應(yīng)該是說瀏覽器解析出來的結(jié)果和我們期望的結(jié)果不一致囚聚，但任何的嵌套錯誤都不會導(dǎo)致頁面呈現(xiàn)有很大的出錯。
我們知道JS代碼如果寫的有語法錯誤标锄，瀏覽器的JS解釋器就會拒絕執(zhí)行并且報錯顽铸，而瀏覽器在遇到不符合語法規(guī)定的HTML代碼時則會千方百計將其呈現(xiàn)出來。
嚴(yán)格嵌套約束料皇、語義嵌套約束
通過上面的示例我們發(fā)現(xiàn)在<p>元素里嵌套<div>元素或者<a>元素里<a>元素會導(dǎo)致所有的瀏覽器都解析錯誤谓松，這其實是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>等
語義嵌套約束：
每個元素基本都有自己的嵌套規(guī)則（即父元素可以是什么歉眷，子元素可以是什么）牺六，除了嚴(yán)格嵌套約束之外的一些規(guī)則就是語義嵌套約束，對于語義嵌套約束汗捡，如果不遵守淑际，頁面可能正常，但也可能解析錯誤扇住，這和下面要講的容錯機制有關(guān)春缕。
瀏覽器的容錯機制
并不是每位同學(xué)在寫完頁面后去做合法性檢查，因此瀏覽器廠商不得不讓它們的瀏覽器以盡可能寬松的方式去處理網(wǎng)頁艘蹋，每個瀏覽器內(nèi)核中都有相當(dāng)一部分代碼專門用來處理那些含糊不清的html標(biāo)記及嵌套锄贼，并且會去猜測前端們到底想如何呈現(xiàn)網(wǎng)頁，這是瀏覽器的容錯機制女阀。
這其實在告訴我們宅荤，我們寫出來的HTML代碼不符合W3C規(guī)范可能最終呈現(xiàn)出來沒有異樣，但那其實是瀏覽器的一種容錯機制浸策，我們沒有理由讓自己以一個隨性的態(tài)度去coding冯键，對待自己的代碼應(yīng)該一絲不茍，即使HTML5的胸襟很寬廣庸汗。
