HTML5标签嵌套规则_html/css_WEB-ITnose

× 目录 [1]分类 [2]子元素 [3]总结

前面的话

　　在html5中，元素的子元素可以是块级元素，这在以前是被认为不符合规则的。本文将详细介绍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】子元素是流元素

、
、
、
、
、
、
、
、        
　　【1.1】子元素是流元素，不包括
元素
    
         
、
        
　　【1.2】子元素是流元素，但不包括
元素    
         
　　【1.3】子元素是流元素，但不包括
元素    
         
　　【1.4】子元素是流元素，但不包括
、
、
元素
         
、
、
　　【1.5】子元素是流元素，但不包括
、
、区块型元素(sectioning content)、标题型元素(heading content)
         
、
、
　　【4.1】子元素可以没有、可以是
元素，也可以是
分享
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。
相关文章
相关视频


html下拉菜单文字怎么变小


HTML里怎么设置thead表头的颜色


html5中元素能拉伸宽度吗


html中怎么清除li黑点


HTML5标签嵌套规则_html/css_WEB-...



接口与抽象类01


类的composer自动加载机制


composer原理与常用命令03


composer原理与常用命令02



网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论






立即提交



专题推荐


独孤九贱-php全栈开发教程
全栈  170W+
主讲：Peter-Zhu  轻松幽默、简短易学，非常适合PHP学习入门


玉女心经-web前端开发教程
入门  80W+
主讲：灭绝师太  由浅入深、明快简洁，非常适合前端学习入门


天龙八部-实战开发教程
实战  120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习




作者信息




认证0级讲师



发布技术文章


最新文章
热门排行




html中怎么清除li黑点
html下拉菜单文字怎么变小
HTML里怎么设置thead表头的颜色
html的name和value是什么意思
html如何给背景图片设置透明度
html中怎么让列表横向排列
html5怎么创建跳转页尾超链接
十分钟搞懂form标签中的GET和POST提交方式



404 not found是什么意思
DOM是什么意思
url是什么意思？
如何改变图片大小
html是什么
html如何创建电子邮件链接
HTML编辑器有哪些？最好用的4款HTML编辑器推荐
如何制作一个简单的HTML登录页面（附代码）





推荐视频教程

javascript初级视频教程


jquery 基础视频教程




视频教程分类

php视频教程
html视频教程
css视频教程
JS视频教程
jQuery视频教程
mysql视频教程
Linux视频教程
Python视频教程





网站首页 
PHP视频
PHP实战
PHP代码
PHP手册
词条
手记
编程词典
php培训

：公益在线php培训，帮助PHP学习者快速成长！
Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作


  
            

        
　　【1.6】子元素是流元素，但不包括
、
、
、区块型元素(sectioning content)、标题型元素(heading content)
    
         
        
　　【1.7】子元素是一个
元素，紧跟着流元素
    
         
        
　　【1.8】子元素是一个
元素，紧跟着流元素
    
         
        
 
    
【2】子元素是语句型元素
    
         
、
、
、
、
、
、




、
、、、、、、、、、、、、、、、、、、、、、、、、
、
、
        
　　【2.1】子元素是语句型元素，但不包括和自身相同的元素
    
         
、、
        
　　【2.2】子元素是语句型元素，但不包括交互型元素(interactive content)
    
         
        
 
    
【3】子元素是transparent(以它的父元素允许的子元素为准)
    
         
        
　　【3.1】子元素是transparent(以它的父元素允许的子元素为准)，但不包括交互型元素(interactive content)
    
         
        
　　【3.2】子元素可以没有、可以是元素，也可以是transparent(以它的父元素允许的子元素为准)
    
         
        
 
    
【4】无子元素
    
         
、
、、、、、、、、