解析HTML5中的标签嵌套规则

下面小编就为大家带来一篇HTML5标签嵌套规则详解【必看】。小编觉得挺不错的，现在分享给大家，也给大家做个参考

前面的话
　　在html5中，3499910bf9dac5ae3c52d5ede7383485元素的子元素可以是块级元素，这在以前是被认为不符合规则的。本文将详细介绍html5的标签嵌套规则

分类
　　 html5出现之前，经常把元素按照block、inline、inline-block来区分。在html5中，元素不再按照display属性来区分，而是按照内容模型来区分。

分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型(interactive content)。元素不属于任何一个类别，被称为穿透的；元素可能属于不止一个类别，称为混合的。

　元数据元素(metadata content)是可以被用于说明其他内容的表现或行为，或者在当前文档和其他文档之间建立联系的元素

base link meta noscript script style template title

　流元素(flow content)是在应用程序和文档的主体部分中使用的大部分元素

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

区块型元素(sectioning content)是用于定义标题及页脚范围的元素

article aside nav section
　　标题型元素(heading content)定义一个区块/章节的标题

h1 h2 h3 h4 h5 h6
　　语句型元素(phrasing content)是用于标记段落级文本的元素

a abbr area (如果它是map元素的子级) 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)是专门用于与用户交互的元素

a audio(如果设置了controls属性) button embed iframe img(如果设置了usemap属性) input(如果type属性不为hidden) keygen label object(如果设置了usemap属性) select textarea video (如果设置了controls属性)
 

子元素
【1】子元素是流元素

23c3de37f2f9ebcb477c4a90aac6fffd、2f8332c8dcfd5c7dec030a070bf652c3、b8a712a75cab9a5aded02f74998372b4、25edfb22a4f469ecb59f1190150159c6、67bc4f89d416b0b8236eaa5f43dee742、614eb9dc63b3fb809437a716aa228d24、dc6dce4a544fdca2df29d5ac0ea9906b、61b85035edf2b42260fdb5632dc5728a、b6c5a531a458a2e790c1fd6421739d1c
　　【1.1】子元素是流元素，不包括61b85035edf2b42260fdb5632dc5728a元素

15221ee8cba27fc1d7a26c47a001eb9b、c787b9a589a3ece771e842a6176cf8e9
　　【1.2】子元素是流元素，但不包括f5d188ed2c074f8b944552db028f98a1元素

63bd76834ec05ac1f4c0ebbeaafb0994
　　【1.3】子元素是流元素，但不包括ff9c23ada1bcecdd1a0fb5d5a0f18437元素

ff9c23ada1bcecdd1a0fb5d5a0f18437
　　【1.4】子元素是流元素，但不包括1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、61b85035edf2b42260fdb5632dc5728a元素

1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、61b85035edf2b42260fdb5632dc5728a
　　【1.5】子元素是流元素，但不包括1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、区块型元素(sectioning content)、标题型元素(heading content)

73de882deff7a050a357292d0a1fca94、b4d429308760b6c2d20d6300079ed38e
　　【1.6】子元素是流元素，但不包括1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、208700f394e4cf40a7aa505373e0130b、区块型元素(sectioning content)、标题型元素(heading content)

208700f394e4cf40a7aa505373e0130b
　　【1.7】子元素是一个614eb9dc63b3fb809437a716aa228d24元素，紧跟着流元素

24203f2f45e6606542ba09fd2181843a
　　【1.8】子元素是一个e911751791aa3ba95dc724e2fb905976元素，紧跟着流元素

3a40a4e7c73d4afbf61ba6910bd6f73f
 

【2】子元素是语句型元素

4a249f0d628e2318394fd9b75b4636b1、c1a436a314ed609750bd7c7d319db4da、684271ed9684bde649abda8831d4d355、3f7b3decd2dcafb07b84d2d3985d9f40、39318b6f72ed39310530dfd69d0078e1、4e9ee319e0fa4abc21ff286eeb145ecc、e388a4556c0f65e1904146cc1a846bee、e03b848252eb9375d56be284e690e873、907fae80ddef53131f3292ee4f81644b、8e99a69fbe029cd4e2b854e244eab143、d015d241ae6d34c34210679b5204fe85、2e44d2d3284d23d932e1fd85f3d4cf3a、f3a85e1241a187c5ac462d886e9a968b、1244aa79a84dea840d8e55c52dc97869、8a7974376be5f6c00c121222b727adb9、1d029f6197b5a3eb8a3fdf0a088ddf55、46dd80ba616c57a652514755c74c4211、ffbe95d20f3893062224282accb13e8f、b7f90f73cad438258bf67e62f79b2113、162cd570ab1483e383d78dcb7f452f7c、5e4e803d53d659f332070b5d4aa430db、b96cac025db4031319c29e1eb68f19d6、2cdea26b4c3988e37d674b56660962a7、5a8028ccc7a7e27417bff9f05adf5932、a4b561c25d9afb9ac8dc4d70affff419、88f336217b3880082bb52d49b5de60a5、f920514e6447cf1d171079d1371f007f、af4e6c3c591431c4583becd75d1c3582、71af07a0e88a1ac1ff73f855702ac153、45a2772a6b6107b401db3c9b82c049c2、d5fd7aea971a85678ba271703566ebfd、be6d67dae90cc1ad6469079e163d0939、e911751791aa3ba95dc724e2fb905976、2e1cf0710519d5598b1f0f14c36ba674
　　【2.1】子元素是语句型元素，但不包括和自身相同的元素

7f9d788ef50b059a7f76f3d2e4ccc9d1、6ecb87e5318a36c03c59e25d55f43372、49c6123c49c6be380cb91db06cd3bfa9
　　【2.2】子元素是语句型元素，但不包括交互型元素(interactive content)

bb9345e55eb71822850ff156dfde57c8
 

【3】子元素是transparent(以它的父元素允许的子元素为准)

426be984ffbbb815d7d88e3543a85d91、823db3943044a0a9a620ada8d4b1d965、dab9f699790ab0922e596ecb9f6677d5
　　【3.1】子元素是transparent(以它的父元素允许的子元素为准)，但不包括交互型元素(interactive content)

3499910bf9dac5ae3c52d5ede7383485
　　【3.2】子元素可以没有、可以是0c68fef83818661b6da588c77ca3985e元素，也可以是transparent(以它的父元素允许的子元素为准)

273238ce9338fbb04bee6997e5552b95
 

【4】无子元素

f32b48428a809b51f04d3228cdf461fa、0c6dc11e160d3b678d68754cc175188a、37fcc81822f151c26d66e5caf9953670、a1f02c36ba31691bcfe87b2722de723b、d8e2720730be5ddc9c2a3782839e8eb6、0c68fef83818661b6da588c77ca3985e、e02da388656c3265154666b7c71a8ddc、9bf7cbf2c39baa37076a22499de2f6ed、03fc64e1e502d5ba947b3a9af06d2d2a、581cdb59a307ca5d1e365becba940e05、aa983b9eb8086376f1f6481364a02e5a
　　【4.1】子元素可以没有、可以是25edfb22a4f469ecb59f1190150159c6元素，也可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a元素

c34106e0b4e09414b63b2ea253ff83d6、ff6d136ddc5fdfeffaf53ff6ee95f185
　　【4.2】子元素可以没有、可以是73de882deff7a050a357292d0a1fca94和67bc4f89d416b0b8236eaa5f43dee742元素，也可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a元素

5c69336ffbc20d23018e48b396cdd57a
　　【4.3】子元素可以没有，可以是5a07473c87748fb1bf73f23d45547ab8、5b7a15bed8615d1b843806256bebea72，也可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a元素

221f08282418e2996498697df914ce4e
　　【4.4】子元素可以没有，可以是5a07473c87748fb1bf73f23d45547ab8，也可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a元素

5b7a15bed8615d1b843806256bebea72
　　【4.5】子元素可以没有、可以是5a07473c87748fb1bf73f23d45547ab8元素

fc86e7b705049fc9d4fccc89a2e80ee3
　　【4.6】子元素可以没有、也可以是9bf7cbf2c39baa37076a22499de2f6ed元素，也可以是e02da388656c3265154666b7c71a8ddc元素

b97864c2e0ef2353a16c4d64c7734e92、39000f942b2545a5315c57fa3276f220
　　【4.7】子元素可以没有，也可以是581cdb59a307ca5d1e365becba940e05、d477f9ce7bf77f53fbcf36bec1b69b7a元素

879b49175114808d868f5fe5e24c4e0b
　　【4.8】子元素可以没有，可以是a34de1251f0d9fe1e645927f19a896e8，也可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a元素

92cee25da80fac49f6fb6eec5fd2c22a、ae20bdd317918ca68efdc799512a9b39、06669983c3badb677f993a8c29d18845
　　【4.9】子元素可以没有，可以是a34de1251f0d9fe1e645927f19a896e8、b4d429308760b6c2d20d6300079ed38e，也可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a元素

a34de1251f0d9fe1e645927f19a896e8
 

【5】子元素是63bd76834ec05ac1f4c0ebbeaafb0994、879b49175114808d868f5fe5e24c4e0b、ae20bdd317918ca68efdc799512a9b39、06669983c3badb677f993a8c29d18845、92cee25da80fac49f6fb6eec5fd2c22a，也可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a元素

f5d188ed2c074f8b944552db028f98a1
 

【6】子元素是文本内容

4750256ae76b6b9d804861d8f69e79d3
　　【6.1】子元素可以没有，也可以是文本内容

5a07473c87748fb1bf73f23d45547ab8

总结
　　关于每个元素的详细嵌套规则，上部分已经详细介绍。这部分主要对常用标签的嵌套规则进行总结

　　[注意]将鼠标移动到深灰色背景的文字上，title将显示该元素所包含的标签

【1】4a249f0d628e2318394fd9b75b4636b1、c1a436a314ed609750bd7c7d319db4da、684271ed9684bde649abda8831d4d355、3f7b3decd2dcafb07b84d2d3985d9f40、39318b6f72ed39310530dfd69d0078e1、4e9ee319e0fa4abc21ff286eeb145ecc、e388a4556c0f65e1904146cc1a846bee的子元素是语句型元素

【2】1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d不可嵌套1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d

【3】3499910bf9dac5ae3c52d5ede7383485的子元素是transparent(以它的父元素允许的子元素为准)，但不包括交互型元素(interactive content)

【4】ff9c23ada1bcecdd1a0fb5d5a0f18437不可嵌套ff9c23ada1bcecdd1a0fb5d5a0f18437

【5】bb9345e55eb71822850ff156dfde57c8子元素是语句型元素，不可嵌套交互型元素(interactive content)

【6】63bd76834ec05ac1f4c0ebbeaafb0994不可嵌套f5d188ed2c074f8b944552db028f98a1

【7】73de882deff7a050a357292d0a1fca94、b4d429308760b6c2d20d6300079ed38e不可嵌套1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、区块型元素(sectioning content)、标题型元素(heading content)

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. HTML5之Video标签详解

4. HTML5不支持标签和新增标签详解

以上是解析HTML5中的标签嵌套规则的详细内容。更多信息请关注PHP中文网其他相关文章！