HTML5 新增标签有哪些

HTML5学堂：在HTML5从4.0升级到5.0版本的过程中，增加很多新标签。这是一道看上去比较简单的前端面试题，考察的是HTML4到HTML5，版本变更时，标签发生的变化。但是各位一定要注意，除了要了解基本标签有哪些之外，也要了解标签的基本功能和用法，例如如何让低端浏览器兼容header标签等。在准备这道面试题的时候，一定不要停留在表面，针对每个标签应当深入的思考。

1、面试题的种类

HTML5

2、面试题考核的知识点

HTML5新标签

3、面试题注意点

叙述HTML5新增的标签，可以根据布局方式上一一列举，再从视音频等元素列举出部分即可

4、面试题的参考答案

<article>标签定义外部的内容（结构元素）

<aside>定义页面内容之外的内容。 aside的内容与article的内容相关。（结构元素）

<figure>定义一组媒介内容的分组，以及它们的标题。（结构元素）

<section>标签定义文档中的节（section，区段）。比如章节，页眉，页脚或文档中的其他部分（结构元素）

<meter>定义预定义范围内的度量。仅用于已知最大和最小值的度量（内联元素）

<progress>定义任何类型的任务的进度。可以使用<progress>标签来显示javascript中耗费时间的函数的进度（内联元素）

<time>定义一个日期/时间 （内联元素）

<audio>定义声音内容。(内嵌元素)

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式

<video>定义视频。(内嵌元素)

Ogg支持firefox3.5，opera10.5，chrome3.0

Mpeg 4 支持chrome3.0，safsri3.0

Video也支持多个source元素，链接到不同的视频文件，浏览器将使用第一个可识别的格式

属性值：

autoplay=”autoplay”就绪后马上播放

loop=“loop”播放完再次播放

<command>定义命令按钮 （交互元素）

<datalist>定义下拉列表,与input元素配合使用该元素，定义input可能出现的值，datalist的选项不会被显示出来，它仅仅是合法的输入值列表（交互元素）

<details>定义元素的细节 （交互元素）

<canvas>定义图形,绘制路径，矩形，圆形，字符以及添加图像的方法

Canvas元素本身没有绘图能力，所有的绘制工作必须在JavaScript内部完成

<dialog>定义对话（会话）dialog元素表示几个人之间的对话。

<embed>定义外部交互内容或插件

<event-source>为服务器发送的事件定义目标

<footer>定义 section 或 page 的页脚

<figcaption> 标签定义 figure 元素的标题。

<hgroup> 标签用于对网页或区段（section）的标题进行组合。

<keygen>标签提供一种验证用户的可靠方法。keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<header>定义 section 或 page 的页眉（介绍信息）

<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

<nav>定义导航链接。

<output>定义输出的一些类型。

<source>定义媒体资源

Ogg支持firefox3.5，opera10.5，chrome3.0

Mpeg 4 支持chrome3.0，safsri3.0

Video也支持多个source元素，链接到不同的视频文件，浏览器将使用第一个可识别的格式

属性值：

autoplay=”autoplay”就绪后马上播放

loop=“loop”播放完再次播放

<ruby> 标签定义 ruby 注释（中文注音或字符）在东亚使用

欢迎沟通交流~HTML5学堂