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. MySql突然连接不上,报Can't connect to MySQL server on 'localhost' (10061),并且没有mysqld时解决方案

    今天连接数据库时突然连接不上,前一天还是好好的.打开数据库就报 Can't connect to MySQL server on 'localhost' (10061) 一直也知道是MySQL服务没有 ...

  2. android surfaView surfaHolder video 播放

    主文件 package cn.com.sxp;import android.app.Activity;import android.media.AudioManager;import android. ...

  3. CitusDB UPSERT

    CitusDB的upsert功能 postgresql9.5 版本支持 "UPSERT" 特性, 这个特性支持 INSERT 语句定义 ON CONFLICT DO UPDATE/ ...

  4. python如何将一个多位数数值转换为列表类型

    现在:a = 10,由于暂时没找到更好的方法,且使用下面的方法进行转换. 目标:转化为['10'] 以下为错误尝试: 1.直接转换,提示整型对象不可迭代. 2.先转换为字符串,再转换为列表,发现被分成 ...

  5. 一次使用InfluxDB数据库的总结

    前言 因当前的项目需要记录每秒钟服务器的状态信息,例如负载.cpu等等信息,这些数据都是和时间相关联的. 因为一秒钟就要存储挺多的数据.而且我还在前端做了echart的折线图,使用websocket实 ...

  6. 个人永久性免费-Excel催化剂功能第31波-数量金额分组凑数功能,财务表哥表姐最爱

    在财务工作过程中,很大时候需要使用到凑数的需求,花了两三天时间认真研究了一下,本人水平也只能做代码搬运工,在用户体验上作了一下完善.完成了Excel版的凑数功能. 文章出处说明 原文在简书上发表,再同 ...

  7. Scrapy爬虫框架与常用命令

    07.08自我总结 一.Scrapy爬虫框架 大体框架 2个桥梁 二.常用命令 全局命令 startproject 语法:scrapy startproject <project_name> ...

  8. 解决 mysql多表联合查询时出现的分页问题

    mysql一对多分页问题 部门表:tbl_dept 员工表:tbl_emp 数据库sql文件 CREATE DATABASE /*!32312 IF NOT EXISTS*/`ssm-crud` /* ...

  9. 《VR入门系列教程》之21---使用Unity开发GearVR应用

    使用Unity开发GearVR应用     上一章我们介绍了如何运用Unity3D开发Oculus Rift应用,当然,这个便宜且强大的游戏引擎也可以用于GearVR的应用开发,这时我们需要用到Ocu ...

  10. CentOS 下编译安装PHP

    1.   去php官网下载源码 http://www.php.net/downloads.php ,我下载使用的版本是(php-5.4.8.tar.gz) 2.   安装环境 yum install ...