成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

HTML標(biāo)簽嵌套到底怎樣才算是規(guī)范？

Hegel_Gu / 3121人閱讀

摘要：最近在看前端開(kāi)發(fā)最佳實(shí)踐，看到有一個(gè)小節(jié)的標(biāo)題是過(guò)時(shí)的塊狀元素和行內(nèi)元素，之前聽(tīng)到的關(guān)于標(biāo)簽的嵌套規(guī)范一直在講，甚至面試的時(shí)候還被問(wèn)到，但是自己在之前的工作中，的的確確用標(biāo)簽包過(guò)塊元素，為了能有一個(gè)更好的用戶體驗(yàn)，模擬的一個(gè)按鈕。

最近在看《web前端開(kāi)發(fā)最佳實(shí)踐》，看到有一個(gè)小節(jié)的標(biāo)題是 過(guò)時(shí)的塊狀元素和行內(nèi)元素 ，之前聽(tīng)到的關(guān)于HTML標(biāo)簽的嵌套規(guī)范一直在講，甚至面試的時(shí)候還被問(wèn)到，但是自己在之前的工作中，的的確確用標(biāo)簽包過(guò)塊元素，為了能有一個(gè)更好的用戶體驗(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的代碼：

很明顯，不符合上面嵌套規(guī)則最后一條，因?yàn)樗趦?nèi)聯(lián)元素元素中嵌套了塊元素元素

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

因?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中的分類比HTML 4.01中的分類更具體，總共分為7類，每種元素并不限于某一類型，有可能某個(gè)元素屬于多個(gè)類型。

Flow（流式元素）:

這個(gè)分類基本上包含了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（交互元素）:

交互式元素是專門(mén)用于與用戶交互的元素。

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ò)誤，即：在

~
元素內(nèi)嵌入
等元素所有瀏覽器可以解析正常。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50836.html

相關(guān)文章

  • 前端知識(shí)點(diǎn)整理

    摘要：難怪超過(guò)三分之一的開(kāi)發(fā)人員工作需要一些知識(shí)。但是隨著行業(yè)的飽和，初中級(jí)前端就業(yè)形勢(shì)不容樂(lè)觀。整個(gè)系列的文章大概有篇左右，從我是如何成為一個(gè)前端工程師，到各種前端框架的知識(shí)。 為什么 call 比 apply 快？ 這是一個(gè)非常有意思的問(wèn)題。 作者會(huì)在參數(shù)為3個(gè)（包含3）以內(nèi)時(shí)，優(yōu)先使用 call 方法進(jìn)行事件的處理。而當(dāng)參數(shù)過(guò)多（多余3個(gè)）時(shí)，才考慮使用 apply 方法。 這個(gè)的原因...

    Lowky 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)整理

    摘要：難怪超過(guò)三分之一的開(kāi)發(fā)人員工作需要一些知識(shí)。但是隨著行業(yè)的飽和，初中級(jí)前端就業(yè)形勢(shì)不容樂(lè)觀。整個(gè)系列的文章大概有篇左右，從我是如何成為一個(gè)前端工程師，到各種前端框架的知識(shí)。 為什么 call 比 apply 快？ 這是一個(gè)非常有意思的問(wèn)題。 作者會(huì)在參數(shù)為3個(gè)（包含3）以內(nèi)時(shí)，優(yōu)先使用 call 方法進(jìn)行事件的處理。而當(dāng)參數(shù)過(guò)多（多余3個(gè)）時(shí)，才考慮使用 apply 方法。 這個(gè)的原因...

    snowLu 評(píng)論0 收藏0

  • 我與前端 | 視野的重要性

    摘要：提升視野的方式有很多，最重要的一點(diǎn)在于自己主動(dòng)動(dòng)腦思考，去想的越多，收獲也就會(huì)越多。相關(guān)文章鏈接我與前端因興趣起源 HTML5學(xué)堂（碼匠）：在自學(xué)WEB前端或者任何一種技術(shù)的過(guò)程中，視野都是極其重要的影響因素，視野決定著我們努力的方向，縱然我們多么努力，走錯(cuò)了方向也是枉然。 視野的重要性 (我與前端系列-02) 1.書(shū)籍問(wèn)題導(dǎo)致自學(xué)效率不高 通過(guò)一段時(shí)間的自學(xué)，已經(jīng)清晰了解了HTML與...

    william 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<