HTML5新增语义化标签

习毅

1.HTML5新增的标签

article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video

2.新增标签释义

article:

即定义article(文章)

aside:

定义页面之外的内容（常用于侧边栏，需要注意的是：移除侧边栏（aside标签及其内容）时不能影响网页的主体结构和布局）

audio:

定义声音内容(音频)

各浏览器支持的音频格式

音频格式	chrome	fireFox	opear	safari	ie9
OGG	支持	支持	支持	不支持	不支持
MP3	支持	不支持	支持	不支持	支持
WAV	不支持	支持	不支持	支持	不支持

 

 

 

 

 

 

 

 

 

 

 

 

bdi:

定义文本的文本方向，使其脱离其周围文本的方向设置。

canvas:

定义图形

command：

定义命令按钮

datalist：

定义datalist,标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。请使用 <input> 元素的 list 属性来绑定 <datalist> 元素

details:

规定 details 是否可见

embed:

定义外部交互内容或插件

figcaption:

定义 figure 元素的标题

figure：

定义媒介内容的分组，以及它们的标题（常用于和figure配套实现图文效果）

footer：

定义页脚

header：

定义头部

hgroup：

用来对标题元素进行分组。当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列 <h1>-<h6>元素进行分组

keygen:

规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器

mark：

定义有记号的文本

meter：

定义预定义范围内的度量

nav:

标签定义导航链接的部分。并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求

output:

标签作为计算结果输出显示(比如执行脚本的输出)

progress:

标签定义运行中的任务进度（进程）

rp：

定义若浏览器不支持 ruby 元素显示的内容

rt：

定义 ruby 注释的解释

ruby：

定义 ruby 注释

section：

定义文档的某个区域。比如章节、头部、底部或者文档的其他区域

source:

定义媒介源

summary:

定义 details 元素的标题

time:

定义日期/时间

track:

定义用在媒体播放器中的文本轨道

video:

定义视频，支持三种格式Ogg、MPEG4、WebM

3.新增标签的优点

总的来说HTML5新增标签是为我们开发者提供了便利，现如今我们在搭建页面总结构的时候，往往会使用header来定义头部位置，div来定义页面内容，再用footer来定义页脚，可在html5之前，开发者们往往只能用一层又一层的div来搭建页面结构，如果页面结构复杂，在没有注释的情况下我们很难在后期对其进行维护和更新，但如今有了HTML5新增的语义化标签，这些问题也就随之解决了。

来源：https://www.cnblogs.com/xxqd/p/12179738.html