码迷,mamicode.com
首页 > Web开发 > 详细

HTML5新增语义化标签

时间:2020-01-11 15:09:25      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:input   details   设备   图文   注释   ram   服务器   apt   音频   

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新增的语义化标签,这些问题也就随之解决了。

HTML5新增语义化标签

标签:input   details   设备   图文   注释   ram   服务器   apt   音频   

原文地址:https://www.cnblogs.com/xxqd/p/12179738.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!