今天分享一下我遇到的一个面试题，是关于HTML5元素的问题，简单列举出HTML5新增的元素（常用的）的有哪些？
#️⃣关于HTML5
概念：HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。
简单理解为：
- HTML5 是最新的 HTML 标准。
- HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
- HTML5 拥有新的语义、图形以及多媒体元素。
- HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
- HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
#️⃣HTML5新增元素
canvas
标签 |
描述 |
<canvas> |
标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
多媒体标签
标签 |
描述 |
<audio> |
定义音频内容 |
<video> |
定义视频（video 或者 movie） |
<source> |
定义多媒体资源 <video> 和 <audio> |
<embed> |
定义嵌入的内容，比如插件。 |
<track> |
为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
表单
标签 |
描述 |
<datalist> |
定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
<keygen> |
规定用于表单的密钥对生成器字段。 |
<output> |
定义不同类型的输出，比如脚本的输出。 |
语义和结构
HTML5提供了新的元素来创建更好的页面结构：
标签 |
描述 |
<article> |
定义页面独立的内容区域。 |
<aside> |
定义页面的侧边栏内容。 |
<bdi> |
允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
<command> |
定义命令按钮，比如单选按钮、复选框或按钮 |
<details> |
用于描述文档或文档某个部分的细节 |
<dialog> |
定义对话框，比如提示框 |
<summary> |
标签包含 details 元素的标题 |
<figure> |
规定独立的流内容（图像、图表、照片、代码等等）。 |
<figcaption> |
定义 <figure> 元素的标题 |
<footer> |
定义 section 或 document 的页脚。 |
<header> |
定义了文档的头部区域 |
<mark> |
定义带有记号的文本。 |
<meter> |
定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> |
|
<progress> |
定义任何类型的任务的进度。 |
<ruby> |
定义 ruby 注释（中文注音或字符）。 |
<rt> |
定义字符（中文注音或字符）的解释或发音。 |
<rp> |
在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
<section> |
定义文档中的节（section、区段）。 |
<time> |
定义日期或时间。 |
<wbr> |
规定在文本中的何处适合添加换行符。 |
其中，<article>元素和<section>元素在使用上非常容易用错。原因也很明显，他们可以包含很多子元素，同时还可以互相嵌套。其实<article>元素可以看成是 一种特殊类型的<section>元素，它比<section>元素更强调独立性。即<section> 元素强调分段或分块，而<article>元素强调独立性。
❗最后想说：关于H5和HTML5的区别
关于二者的名称，一直都是有争议的，很多人把H5误以为是HTML5的简称，其实并不是这回事。HTML5是Web中核心语言HTML的规范，HTML5是一个技术名词，同时要注意HTML5不是一个什么技术，而是一个标准规范。相比之下H5并没有标准的解释，因此关于H5的解释就有很多不一样的说法了，H5通常用于指H5广告，是在微信等移动端上用作宣传营销使用的，也有人说是移动版的PPT，总而言之H5是一个产品名词。因此你要知道H5不是HTML5的简称就可以了。
关于H5和HTML5的讨论，1+X Web前端开发的考题中也出现过题目如下：
要是遇到这题可千万别答错了（狗头
