Html5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素四大类。


下面是对各标签的详解,section、header、footer、nav、article、aside、figure、code、dialog、meter、

time、progress、video、audio、details、atagrid、menu、command的 介绍

结构性元素主要负责web上下文结构的定义

section:在 web 页面应用中,该元素也可以用于区域的章节描述。

header:页面主体上的头部, header 元素往往在一对 body 元素中。

footer:页面的底部(页脚),通常会标出网站的相关信息。

nav:专门用于菜单导航、链接导航的元素,是 navigator 的缩写。

article:用于表现一篇文章的主体内容,一般为文字集中显示的区域。

级块性元素主要完成web页面区域的划分,确保内容的有效分割。

aside:用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。

figure:是对多个元素进行组合并展示的元素,通常与 ficaption 联合使用。

code:表示一段代码块。

dialog:用于表达人与人之间的对话,该元素包含 dt 和 dd 这两个组合元素, dt 用于表示说话者,而 dd 用来表示说话内容。

行内语义性元素主要完成web页面具体内容的引用和描述,是丰富内容展示的基础。

meter:表示特定范围内的数值,可用于工资、数量、百分比等。

time:表示时间值。

progress:用来表示进度条,可通过对其 max 、 min 、 step 等属性进行控制,完成对进度的表示和监事。

video:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式。

audio:音频元素,用于支持和实现音频文件的直接播放,支持缓冲预载和多种音频媒体格式。

交互性元素主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础。

details:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与 legend 交互才会显示出来。

datagrid:用来控制客户端数据与显示,可以由动态脚本及时更新。

menu:主要用于交互菜单(曾被废弃又被重新启用的元素)。

command:用来处理命令按钮。

如果对您有帮助,请点击支持~

html5新特性-header,nav,footer,aside,article,section等各元素的详解的更多相关文章

  1. HTML5新特性:范围样式

    原文出处:http://blog.csdn.net/hfahe/article/details/7381141        Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...

  2. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  3. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  4. 第二季第八天 HTML5新特性

    在函数内部window.a =  a  在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...

  5. 前端进阶系列(三):HTML5新特性

    HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...

  6. 关于自我总结的html5新特性

    最近本包子制订了一个学校计划,第一步就是了解并总结一下html5现在所含有的新特性,好吧,这只是一个了解,- -! 自己总结了一个word文档,里面很多东西自己都还没实际用过,下一步,本包子要写pc端 ...

  7. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  8. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  9. HTML5新特性:FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

随机推荐

  1. python数据库-mongoDB的高级查询操作(55)

    一.MongoDB索引 为什么使用索引? 假设有一本书,你想看第六章第六节讲的是什么,你会怎么做,一般人肯定去看目录,找到这一节对应的页数,然后翻到这一页.这就是目录索引,帮助读者快速找到想要的章节. ...

  2. 学习springboot整合mybatis并编写测试类

    报名立减200元.暑假直降6888. 邀请链接:http://www.jnshu.com/login/1/20535344 邀请码:20535344 遇到的问题: 1.原因是在启动类上只有一个@Map ...

  3. 微信小程序开发--API界面交互

    一.wx:showActionSheet(上拉菜单) 属性 类型 默认值 必填 说明 itemList Array.<string>   是 按钮的文字数组,数组长度最大为 6 itemC ...

  4. UVA10763 交换学生 Foreign Exchange 题解

    题目链接: https://www.luogu.org/problemnew/show/UVA10763 题目分析: 本题我首先想到的做法是把每一个数都map一下,然后互相判断,例如a,b两人准备交换 ...

  5. 「Sqlserver」数据分析师有理由爱Sqlserver之一-好用的插件工具推荐

    在此系列中,笔者为大家带来一些以数据分析师视角去使用Sqlserver的系列文章,希望笔者走过的路能够给后来者带来一些便利. 背景介绍 在数据分析师的角色下,使用数据库更多的是为了从数据库中获取数据, ...

  6. SpringBoot2.0集成WebSocket,实现后台向前端推送信息

    感谢作者,支持原创: https://blog.csdn.net/moshowgame/article/details/80275084 什么是WebSocket? WebSocket协议是基于TCP ...

  7. RDB和AOF的区别

    redis的持久化方式RDB和AOF的区别   1.前言 最近在项目中使用到Redis做缓存,方便多个业务进程之间共享数据.由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据 ...

  8. 七、SQL 高级语法一

    Case when Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE ...

  9. 四、利用SQL Server 2008 R2创建自动备份计划

    (转) 本文主要利用SQL Server 2008 R2自带的"维护计划"创建一个自动备份数据的任务. 首先,启动 Sql Management studio,确保"SQ ...

  10. gawk(awk)的用法案例

    gawk(awk)的用法案例 本文首先简单介绍一个gawk和awk的区别,然后是一点基本使用流程,最后是自己做的一个分析数据文件的脚本代码,供大家参考.另外想了解基本流程的入门知识的可以下载附件pdf ...