HTML5標(biāo)簽嵌套規(guī)則詳解【必看】

2020-03-24 17:36:35

字體：大中小

供稿：網(wǎng)友

目錄[1]分類(lèi) [2]子元素 [3]總結(jié)前面的話(huà)
在html5中， a 元素的子元素可以是塊級(jí)元素，這在以前是被認(rèn)為不符合規(guī)則的。本文將詳細(xì)介紹html5的標(biāo)簽嵌套規(guī)則分類(lèi)
html5出現(xiàn)之前，經(jīng)常把元素按照block、inline、inline-block來(lái)區(qū)分。在html5中，元素不再按照display屬性來(lái)區(qū)分，而是按照內(nèi)容模型來(lái)區(qū)分，分為元數(shù)據(jù)型(metadata content)、區(qū)塊型(sectioning content)、標(biāo)題型(heading content)、文檔流型(flow content)、語(yǔ)句型(phrasing content)、內(nèi)嵌型(embedded content)、交互型(interactive content)。元素不屬于任何一個(gè)類(lèi)別，被稱(chēng)為穿透的；元素可能屬于不止一個(gè)類(lèi)別，稱(chēng)為混合的。元數(shù)據(jù)元素(metadata content)是可以被用于說(shuō)明其他內(nèi)容的表現(xiàn)或行為，或者在當(dāng)前文檔和其他文檔之間建立聯(lián)系的元素base link meta noscript script style template title
流元素(flow content)是在應(yīng)用程序和文檔的主體部分中使用的大部分元素a abbr address area(如果它是map元素的子元素) article aside audio b bdi bdo blockquote br button canvas cite code data datalist del dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd keygen label main map mark math meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time u ul var video wbr text
區(qū)塊型元素(sectioning content)是用于定義標(biāo)題及頁(yè)腳范圍的元素article aside nav section
標(biāo)題型元素(heading content)定義一個(gè)區(qū)塊/章節(jié)的標(biāo)題h1 h2 h3 h4 h5 h6
語(yǔ)句型元素(phrasing content)是用于標(biāo)記段落級(jí)文本的元素a abbr area (如果它是map元素的子級(jí)) audio b bdi bdo br button canvas cite code data 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 template textarea time u var video wbr text
嵌入型元素(embedded content)是引用或插入到文檔中其他資源的元素audio canvas embed iframe img math object svg video
交互型元素(interactive content)是專(zhuān)門(mén)用于與用戶(hù)交互的元素a audio(如果設(shè)置了controls屬性) button embed iframe img(如果設(shè)置了usemap屬性) input(如果type屬性不為hidden) keygen label object(如果設(shè)置了usemap屬性) select textarea video (如果設(shè)置了controls屬性)
子元素
【1】子元素是流元素 article 、 section 、 blockquote 、 li 、 dd 、 figcaption 、 div 、 main 、 td
【1.1】子元素是流元素，不包括 main 元素 aside 、 nav
【1.2】子元素是流元素，但不包括 table 元素 caption
【1.3】子元素是流元素，但不包括 form 元素 form
【1.4】子元素是流元素，但不包括 header 、 footer 、 main 元素 header 、 footer 、 main
【1.5】子元素是流元素，但不包括 header 、 footer 、區(qū)塊型元素(sectioning content)、標(biāo)題型元素(heading content) dt 、 th
【1.6】子元素是流元素，但不包括 header 、 footer 、 address 、區(qū)塊型元素(sectioning content)、標(biāo)題型元素(heading content) address
【1.7】子元素是一個(gè) figcaption 元素，緊跟著流元素 figure
【1.8】子元素是一個(gè) legend 元素，緊跟著流元素 filedset
【2】子元素是語(yǔ)句型元素 h1 、 h2 、 h3 、 h4 、 h5 、 h6 、 p 、 pre 、 em 、 strong 、 small 、 s 、 cite 、 q 、 abbr 、 data 、 time 、 code 、 var 、 samp 、 kbd 、 sub 、 sup 、 i 、 b 、 u 、 mark 、 bdi 、 bdo 、 span 、 input 、 output 、 legend 、 label
【2.1】子元素是語(yǔ)句型元素，但不包括和自身相同的元素 dfn 、 progress 、 meter
【2.2】子元素是語(yǔ)句型元素，但不包括交互型元素(interactive content) button
【3】子元素是transparent(以它的父元素允許的子元素為準(zhǔn)) ins 、 del 、 map
【3.1】子元素是transparent(以它的父元素允許的子元素為準(zhǔn))，但不包括交互型元素(interactive content) a
【3.2】子元素可以沒(méi)有、可以是 param 元素，也可以是transparent(以它的父元素允許的子元素為準(zhǔn)) object
【4】無(wú)子元素 hr 、 br 、 wbr 、 img 、 embed 、 param 、 source 、 track 、 area 、 col 、 keygen
【4.1】子元素可以沒(méi)有、可以是 li 元素，也可以是 script 、 template 元素 ol 、 ul
【4.2】子元素可以沒(méi)有、可以是 dt 和 dd 元素，也可以是 script 、 template 元素 dl
【4.3】子元素可以沒(méi)有，可以是 option 、 optgroup ，也可以是 script 、 template 元素 select
【4.4】子元素可以沒(méi)有，可以是 option ，也可以是 script 、 template 元素 optgroup
【4.5】子元素可以沒(méi)有、可以是 option 元素 datalist
【4.6】子元素可以沒(méi)有、也可以是 track 元素，也可以是 source 元素 audio 、 video
【4.7】子元素可以沒(méi)有，也可以是 col 、 template 元素 colgroup
【4.8】子元素可以沒(méi)有，可以是 tr ，也可以是 script 、 template 元素 tbody 、 thead 、 tfoot
【4.9】子元素可以沒(méi)有，可以是 tr 、 th ，也可以是 script 、 template 元素 tr
【5】子元素是 caption 、 colgroup 、 thead 、 tfoot 、 tbody ，也可以是 script 、 template 元素 table
【6】子元素是文本內(nèi)容 textarea
【6.1】子元素可以沒(méi)有，也可以是文本內(nèi)容 option
總結(jié)
關(guān)于每個(gè)元素的詳細(xì)嵌套規(guī)則，上部分已經(jīng)詳細(xì)介紹。這部分主要對(duì)常用標(biāo)簽的嵌套規(guī)則進(jìn)行總結(jié) [注意]將鼠標(biāo)移動(dòng)到深灰色背景的文字上，title將顯示該元素所包含的標(biāo)簽【1】 h1 、 h2 、 h3 、 h4 、 h5 、 h6 、 p 的子元素是語(yǔ)句型元素【2】 header 、 footer 不可嵌套 header 、 footer 【3】 a 的子元素是transparent(以它的父元素允許的子元素為準(zhǔn))，但不包括交互型元素(interactive content)【4】 form 不可嵌套 form 【5】 button 子元素是語(yǔ)句型元素，不可嵌套交互型元素(interactive content)【6】 caption 不可嵌套 table 【7】 dt 、 th 不可嵌套 header 、 footer 、區(qū)塊型元素(sectioning content)、標(biāo)題型元素(heading content)以上這篇HTML5標(biāo)簽嵌套規(guī)則詳解【必看】就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持phpstudy。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：DOCTYPE html 很重要

下一篇：HTML如何利用canvas實(shí)現(xiàn)彈幕功能