解析HTML5中的标签嵌套规则-H5教程-PHP中文网

首页

web前端

H5教程

解析HTML5中的标签嵌套规则

零下一度

May 25, 2017 pm 01:50 PM

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)

【相关推荐】

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5和HTML5：网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。

H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面，支持组件化开发。2.React通过虚拟DOM优化页面渲染，适合复杂应用。3.Webpack用于模块打包，优化资源加载。

HTML5的遗产：当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代码：可访问性和语义HTMLApr 09, 2025 am 12:05 AM

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构，提高SEO。2.ARIA属性如aria-label增强可访问性，辅助技术用户可顺利使用网页。

H5与HTML5相同吗？Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多数情况下是相同的，但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准，包含新标签和API。2."h5"通常是HTML5的简称，但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。

H5的功能是什么？Apr 07, 2025 am 12:10 AM

H5，即HTML5，是HTML的第五个版本，它为开发者提供了更强大的工具集，使得创建复杂的网页应用变得更加简单。H5的核心功能包括：1）元素允许在网页上绘制图形和动画；2）语义化标签如、等，使网页结构清晰，利于SEO优化；3）新API如GeolocationAPI，支持基于位置的服务；4）跨浏览器兼容性需要通过兼容性测试和Polyfill库来确保。