最近在看《web前端開發(fā)最佳實踐》，看到有一個小節(jié)的標題是 過時的塊狀元素和行內(nèi)元素 ，之前聽到的關(guān)于HTML標簽的嵌套規(guī)范一直在講，甚至面試的時候還被問到，但是自己在之前的工作中，的的確確用<a>標簽包過塊元素，為了能有一個更好的用戶體驗，模擬的一個按鈕。那個時候就有困惑，不是行內(nèi)元素不能嵌套塊元素么？直到看到這段才大概了解了一些，因為我用的文檔申明是HTML5的，所以解析結(jié)構(gòu)會按照HTML5的標準。

這是我之前匯總的一些標簽嵌套規(guī)范：

• ul,li/ol,li/dl,dt,dd擁有父子級關(guān)系的標簽；ul、ol下都只能跟li，dl下只能跟dt.dd。
• p,dt,h標簽里面不能嵌套塊元素；
• a標簽不能嵌套a；
• 行內(nèi)元素不能嵌套塊元素；

看一下下面這段結(jié)構(gòu)，據(jù)說是來自facebook的代碼：

<ul>
  <li>
    <h4><a href=""><div></div></a></h4>
  </li>
</ul>

很明顯，不符合上面嵌套規(guī)則最后一條，因為它在內(nèi)聯(lián)元素<a>元素中嵌套了塊元素元素<div>

頁面元素的兩個基本類型：行內(nèi)元素和塊狀元素，在HTML5新規(guī)范中，已經(jīng)淡化了元素的這兩種分類，取而代之的方案是更具有語義的HTML元素的分類方式。

因為在構(gòu)建HTML的過程中，首先要考慮的是語義，判斷使用的元素合適與否，就是要判斷元素對應的標簽是否符合當前元素所表達的語義，而不是元素的樣式是不是更符合當前的UI設(shè)計。

為了消除塊元素和行內(nèi)元素這兩個概念引起的混淆（到底什么時候用行內(nèi)元素，什么時候用塊元素，其中元素又那么多，怎么分？），HTML5中的分類比HTML 4.01中的分類更具體，總共分為7類，每種元素并不限于某一類型，有可能某個元素屬于多個類型。

• Flow（流式元素）:

這個分類基本上包含了HTML 4.01中的塊狀元素和行內(nèi)元素。

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（標題元素）:

h1， h2， h3， h4， h5， h6， hgroup

• Sectioning（章節(jié)元素）:

article， aside， nav， section

• Phrasing（段落元素）:

基本上等同于HTML 4.01中行內(nèi)元素的范圍

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ù)元素）:

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

HTML5規(guī)范中的標簽類型關(guān)系圖

最后

希望大家有時間可以去看一下這篇《HTML標簽嵌套規(guī)則》，我也是參考了很多，而且在文章的最后總結(jié)中，驗證了我之前匯總的規(guī)則中的一處錯誤，即：在<h1>~<h6>元素內(nèi)嵌入<div>等元素所有瀏覽器可以解析正常。