解析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不支持标签和新增标签详解

Atas ialah kandungan terperinci 解析HTML5中的标签嵌套规则. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!