html5新标签总结

朱雀 2021-04-19 14:57 614阅读 0赞

为了更好地处理今天的互联网应用，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比较：具有模糊查询的功能，可以输入;  
示例：

### details标签 ###

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

### embed标签 ###

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

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

### figure标签 ###

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

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

### figcaption标签 ###

用法:标签定义 figure 元素的标题（caption）。  
示例：

### 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 标签  
示例：

效果：

### progress标签 ###

用法：标签标示任务的进度（进程）  
示例：

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

效果：

\*\*注：\*\*ie9以及ie9以下版本不支持

### output标签 ###

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

效果：

属性：  
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格式  
示例：

src:歌曲的路径  
controls:播放控件（不添加该属性，默认不出现播放控件）  
loop:循环播放  
autoplay:音频在就绪后马上播放。  
muted:如果出现该属性，则音频输出为静音。  
preload:规定当网页加载时，音频是否默认被加载以及如何被加载,有三个值auto、metadata、none。
**注**：这里只是简单的记录了一些audio的信息，

### video标签 ###

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

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

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

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

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

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标签 ###

用法： 标签定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形