html5新标签总结

3,531 阅读6分钟

为了更好地处理今天的互联网应用,HTML5添加了很多新特性,例如:

  • 用于绘画的 canvas 元素

  • 用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持

  • 新的特殊内容元素,比如 article、footer、header、nav、section

  • 新的表单控件,比如 calendar、date、time、email、url、search

article标签

用法:标签规定独立的自包含内容(定义文章)。

aside标签

用法:标签定义其所处内容之外的内容(aside 的内容应该与附近的内容相关)。

footer标签

用法:标签定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

header标签

用法:标签定义文档的页眉(介绍信息)

nav标签

用法:标签定义导航链接的部分。

section标签

用法:标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分

bdi标签

用法:标签允许您设置一段文本,使其脱离其父元素的文本方向设置。在发布用户评论或其他您无法完全控制的内容时,该标签很有用。
:目前只有 Firefox 和 Chrome 支持 bdi 标签。目前我没有测试出来它的效果(待研究)

datalist标签

用法:标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表;使用 input 元素的 list 属性来绑定 datalist。
:ie和 Safari不支持;
与select比较:具有模糊查询的功能,可以输入;
示例:

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

details标签

用法: 标签用于描述文档或文档某个部分的细节
:只有 Chrome 和 Safari 6 支持 details 标签

embed标签

用法:标签定义嵌入的内容,比如插件
示例:在项目中使用腾讯的视频

<embed src="//player.video.iqiyi.com/d9e0f1893caafc1708b45b622c153312/0/0/v_19rqu21yik.swf-albumId=2028493200-tvId=2028493200-isPurchase=0-cnId=undefined" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

src: 内容地址
type:定义嵌入内容的类型。
width和height: 定义嵌入内容宽和高

figure标签

用法:标签规定独立的流内容(图像、图表、照片、代码等等)。
示例:

<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

figcaption标签

用法:标签定义 figure 元素的标题(caption)。
示例:

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>图片标题</figcaption>
</figure>

keygen标签

用法:定义生成密钥
示例:

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

:ie不支持

mark标签

用法:标签定义带有记号的文本
示例:

<p>我正在整理<mark>html5新特性</mark></p>

效果:

meter标签

用法:标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。 如磁盘用量、查询结果的相关性,等等。
:ie不支持;meter 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 progress 标签
示例:

<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>

效果:

progress标签

用法:标签标示任务的进度(进程)
示例:

下载进度:
<progress value="22" max="100"></progress>

效果:

**注:**ie9以及ie9以下版本不支持

output标签

用法:标签定义不同类型的输出,比如脚本的输出
示例:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form>

效果:

属性:
for: 定义输出域相关的一个或多个元素,值:element_id
form:定义输入字段所属的一个或多个表单,值:form_id
name: 定义对象的唯一名称。(表单提交时使用)

time 标签

用法: 标签定义公历的时间(24 小时制)或日期 示例:

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

:标签不会在任何浏览器中呈现任何特殊效果。

audio标签

用法:标签定义声音,比如音乐或其他音频流。目前, 元素支持的3种文件格式:MP3、Wav、Ogg。但是ie浏览器只支持MP3格式,Safari不支持Ogg格式
示例:

<audio src='音频地址' controls='controls' loop='loop' autoplay='autoplay'></audio>

src:歌曲的路径
controls:播放控件(不添加该属性,默认不出现播放控件)
loop:循环播放
autoplay:音频在就绪后马上播放。
muted:如果出现该属性,则音频输出为静音。
preload:规定当网页加载时,音频是否默认被加载以及如何被加载,有三个值auto、metadata、none。详细解释请参考www.runoob.com/jsref/prop-…
:这里只是简单的记录了一些audio的信息,更深入的了解请戳www.cnblogs.com/leinov/p/38…

video标签

用法:标签定义视频,比如电影片段或其他视频流。但是目前浏览器对这个标签的兼容个不相同,具体如下:

但是之前在项目中遇到过这样的情况:使用的视频是MP4的格式,但是浏览器无法播放。然后就各种百度,发现其实MP4(MPEG-4 Part 14)是一种常见的多媒体容器格式,里面可以嵌入各种编码的视频、音频等。而我们的video标签只支持H264编码的视频,因此只有重新将视频转码。
关于标签所支持的视频格式和编码:

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

<video src="视频地址" controls="controls" autoplay='autoplay' height='200' width='200' loop='loop'>
</video>

src: 视频地址
controls: 视频控件
autoplay: 自动播放
height: 视频的高度
width: 视频的宽度
loop: 循环播放
preload:如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。

source标签

用法:标签为媒介元素(比如 video和audio)定义媒介资源,标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。 示例:

<audio controls>
<source src="/i/horse.ogg" type="audio/ogg">
<source src="/i/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

canvas标签

用法: 标签定义图形,比如图表和其他图像,标签只是图形容器,您必须使用脚本来绘制图形
具体用法请看www.liaoxuefeng.com/wiki/001434…