HTML5 新增元素

HTML5 中的新元素

HTML5 引入了一系列新元素，旨在改进文档结构、语义、表单、多媒体处理和图形功能。

语义/结构元素

这些元素提供了更有意义的方式来构建页面内容，相比仅依赖通用的 <div> 元素，它们对可访问性（accessibility）、搜索引擎优化（SEO）和代码清晰度都有益处。

标签	描述
<header>	定义文档或节的介绍性内容（例如：logo、导航、标题）。
<footer>	定义文档或节的页脚（例如：版权信息、联系链接）。
<nav>	定义一组主要的导航链接。
<main>	定义文档的主要、独特内容。每个页面只应有一个 <main> 元素（不应嵌套在 article、aside、header、footer 或 nav 内部）。
<article>	定义自包含的、可独立分发的内容（例如：博客文章、新闻报道、论坛评论）。
<section>	定义主题相关的分组内容，通常带有标题。比 <article> 或 <nav> 更通用。
<aside>	定义与周围主要内容切向相关的内容（例如：侧边栏、引文、相关链接）。
<figure>	定义自包含的内容，通常在主文本中被引用（例如：图像、图表、代码片段）。
<figcaption>	定义 <figure> 元素的标题或图例。
<time>	定义特定的时间段或日期。可包含 datetime 属性用于机器可读格式。
<mark>	定义标记或突出显示的文本，用于参考或标注目的。

恰当使用这些元素能使你的 HTML 更具描述性，并且对浏览器和开发者都更易于理解。

交互元素

标签	描述
<details>	定义用户可以按需查看或隐藏的额外细节（创建一个显示/隐藏控件）。
<summary>	定义 <details> 元素的可见标题。点击标题可切换细节的显示/隐藏。
<dialog>	定义一个对话框（dialog box）、模态框（modal）或其他交互组件，例如检查器或窗口。可以通过 JavaScript 进行控制（showModal()、close()）。

新表单元素和输入类型

HTML5 通过新的元素和输入类型显著增强了表单功能，提供了更好的用户体验和验证。

新表单元素：

标签	描述
<datalist>	为 <input> 元素提供“自动完成”功能。包含带有预定义建议的 <option> 元素。
<output>	表示计算或用户操作的结果（通常通过 JavaScript 更新）。
<progress>	显示任务的进度（例如：文件上传、加载状态）。
<meter>	表示在已知范围内的标量测量值（一个计量器），例如磁盘使用量或密码强度。

已废弃的表单元素：

用于生成密钥对的 <keygen> 元素现已废弃，不应使用，因为它缺乏浏览器支持并存在安全问题。

新的输入类型：

如前所述，HTML5 添加了许多 <input> 类型：

• email、url、tel
• number、range
• date、time、datetime-local、month、week
• search、color、file

新的输入属性：

像 required、pattern、min、max、step、multiple、placeholder、autocomplete、autofocus、list（用于 <datalist>）以及表单相关属性（formaction、formenctype 等）等属性提供了增强的控制和验证功能。

详细用法请参考 HTML 表单章节。

图形元素

标签	描述
<canvas>	提供一个依赖于分辨率的位图画布，用于使用 JavaScript 动态绘制图形、游戏图或其它可视化图像。
<svg>	定义一个可缩放矢量图形（SVG）的容器。SVG 使用基于 XML 的格式来描述矢量图像，这种图像缩放时不会失真。

两者都可以在 HTML 中直接实现强大的图形功能。

媒体元素

标签	描述
<audio>	嵌入声音内容（音乐或其他音频流）。
<video>	嵌入视频内容。
<source>	为 <video> 或 <audio> 指定多个媒体资源，允许浏览器选择最合适的格式。
<track>	为 <video> 或 <audio> 指定定时文本轨道（如字幕或说明文字）。

这些元素为多媒体提供了原生的浏览器支持，取代了对像 Flash 这样过时插件的需求。

其他值得注意的元素

标签	描述
<wbr>	定义一个单词换行机会——文本中浏览器可以可选地进行换行的位置。
<bdi>	隔离文本中可能与其他文本方向不同（从左到右或从右到左）的部分。常用于嵌入用户生成的内容。
<ruby>、<rt>、<rp>	用于显示 ruby 注解，这在东亚排版中很常见（例如：在字符上方显示读音）。