最近在看《web前端開(kāi)發(fā)最佳實(shí)踐》，看到有一個(gè)小節(jié)的標(biāo)題是 過(guò)時(shí)的塊狀元素和行內(nèi)元素 恨胚，之前聽(tīng)到的關(guān)于HTML標(biāo)簽的嵌套規(guī)范一直在講骂因，甚至面試的時(shí)候還被問(wèn)到，但是自己在之前的工作中赃泡，的的確確用<a>標(biāo)簽包過(guò)塊元素寒波，為了能有一個(gè)更好的用戶(hù)體驗(yàn)，模擬的一個(gè)按鈕升熊。那個(gè)時(shí)候就有困惑俄烁，不是行內(nèi)元素不能嵌套塊元素么？直到看到這段才大概了解了一些级野，因?yàn)槲矣玫奈臋n申明是HTML5的页屠，所以解析結(jié)構(gòu)會(huì)按照HTML5的標(biāo)準(zhǔn)。
這是我之前匯總的一些標(biāo)簽嵌套規(guī)范：
- ul,li/ol,li/dl,dt,dd擁有父子級(jí)關(guān)系的標(biāo)簽蓖柔；ul辰企、ol下都只能跟li，dl下只能跟dt.dd况鸣。
- p,dt,h標(biāo)簽里面不能嵌套塊元素蟆豫；
- a標(biāo)簽不能嵌套a；
- 行內(nèi)元素不能嵌套塊元素懒闷；
看一下下面這段結(jié)構(gòu)，據(jù)說(shuō)是來(lái)自facebook的代碼：
<ul>
<li>
<h4><a href=""><div></div></a></h4>
</li>
</ul>
很明顯，不符合上面嵌套規(guī)則最后一條愤估，因?yàn)樗趦?nèi)聯(lián)元素<a>元素中嵌套了塊元素元素<div>
頁(yè)面元素的兩個(gè)基本類(lèi)型：行內(nèi)元素和塊狀元素帮辟，在HTML5新規(guī)范中，已經(jīng)淡化了元素的這兩種分類(lèi)玩焰，取而代之的方案是更具有語(yǔ)義的HTML元素的分類(lèi)方式由驹。
因?yàn)樵跇?gòu)建HTML的過(guò)程中，首先要考慮的是語(yǔ)義昔园，判斷使用的元素合適與否蔓榄，就是要判斷元素對(duì)應(yīng)的標(biāo)簽是否符合當(dāng)前元素所表達(dá)的語(yǔ)義，而不是元素的樣式是不是更符合當(dāng)前的UI設(shè)計(jì)默刚。
為了消除塊元素和行內(nèi)元素這兩個(gè)概念引起的混淆（到底什么時(shí)候用行內(nèi)元素甥郑，什么時(shí)候用塊元素，其中元素又那么多荤西，怎么分澜搅？），HTML5中的分類(lèi)比HTML 4.01中的分類(lèi)更具體邪锌，總共分為7類(lèi)勉躺，每種元素并不限于某一類(lèi)型，有可能某個(gè)元素屬于多個(gè)類(lèi)型觅丰。
-
Flow（流式元素）:
這個(gè)分類(lèi)基本上包含了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（標(biāo)題元素）:
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（交互元素）:
交互式元素是專(zhuān)門(mén)用于與用戶(hù)交互的元素事富。
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
最后
希望大家有時(shí)間可以去看一下這篇《HTML標(biāo)簽嵌套規(guī)則》，我也是參考了很多端盆，而且在文章的最后總結(jié)中怀骤，驗(yàn)證了我之前匯總的規(guī)則中的一處錯(cuò)誤费封，即：在<h1>~<h6>元素內(nèi)嵌入<div>等元素所有瀏覽器可以解析正常。
