HTML5 引入了许多新元素,旨在使网页结构更语义化、更易于维护和更符合现代 web 开发的需求。以下是一些主要的新元素汇总:
结构元素
<header>
- 定义文档的头部区域,通常包含标题、导航链接等。<nav>
- 定义导航链接的区域。<section>
- 表示文档的一个独立部分,通常包含一个标题。<article>
- 表示独立的内容块,可以单独分发或再利用的内容。<aside>
- 表示与主内容关系不大的附加内容,通常用于侧边栏。<footer>
- 定义文档的底部区域,通常包含版权信息、联系信息等。<main>
- 表示文档的主要内容区域。
多媒体元素
<audio>
- 用于嵌入音频内容。<video>
- 用于嵌入视频内容。<track>
- 用于提供文本轨道(如字幕)在<video>
或<audio>
元素中。
图形元素
<canvas>
- 用于绘制图形,支持通过 JavaScript 绘制图像。<svg>
- 用于嵌入可缩放矢量图形。
表单元素
<progress>
- 显示任务进度的进度条。<meter>
- 用于表示一个已知范围内的测量值。<datalist>
- 提供一个下拉列表,用户输入时会显示匹配的数据。<output>
- 用于显示计算结果。
文档元信息
<time>
- 表示具体的时间(日期和/或时间)。<mark>
- 用于标记文本,通常用于突出显示。<progress>
- 表示任务的进度。<article>
- 表示一篇独立的文章或内容块。
模板与引用
<template>
- 用于包含可重用的代码块,通常用于客户端脚本。<slot>
- 用于 Web Components,从父组件插入内容。
这些新元素使得 HTML 文档更加结构化和语义化,提高了搜索引擎优化(SEO)以及无障碍访问的能力。