<think>好的，用户问的是
HTML5新增的
标签，我需要先回忆一下
HTML5的主要变化。记得
HTML5引入了很多新
标签，主要是为了更好的语义化和结构，同时支持多媒体和图形元素。首先，我应该从结构
标签开始，比如header、nav、section这些，这些都是用来替代之前的div，让页面结构更清晰。
然后，可能需要提到媒体相关的
标签，比如video和
audio，这两个
标签让嵌入视频和
音频变得更简单，不需要依赖Flash。还有canvas和svg，用于图形绘制，特别是canvas可以用来做动画或者游戏。
接下来是表单增强的部分，
HTML5新增了很多输入类型，比如email、number、date，还有datalist和progress这些元素，能提升用户体验和表单验证。
还有语义化
标签，像article、aside、footer、figure、figcaption，这些有助于SEO和可访问性。另外，details和summary
标签可以用来做折叠内容，可能用户会感兴趣。
需要注意的是，虽然大部分现代浏览器都支持这些
标签，但有些旧版本可能需要polyfill。另外，在回答时要强调这些
标签的语义化好处，以及如何替代之前用div实现的结构，提升代码可读性和维护性。
用户可能想了解这些
标签的具体用法和好处，所以每个部分需要简要说明用途，并给出例子。比如，video
标签的src和controls
属性，canvas的绘图能力，表单输入类型如何自动验证等。同时，提醒兼容性问题，确保用户知道在实际项目中可能需要考虑的支持情况。
最后，总结一下
HTML5标签的优势，比如语义化、减少插件依赖、增强表单功能等，帮助用户整体理解。可能用户是
前端初学者，所以语言要尽量通俗，避免太技术化的术语，但也要准确无误。需要检查是否有遗漏的重要
标签，比如time、mark，或者storage相关的，不过storage可能属于API部分，不属于
标签，所以可能不需要提到。</think>
HTML5 新增标签主要围绕语义化、多媒体支持和交互增强展开。以下是关键分类和示例：
---
### 一、语义化结构
标签
1. **`<header>`**
定义页面或区块的头部（如标题、导航栏）。
2. **`<nav>`**
表示导航链接集合（如菜单、目录）。
3. **`<section>`**
定义文档中的独立内容区块（如章节、选项卡内容）。
4. **`<article>`**
表示独立内容（如博客文章、新闻条目）。
5. **`<aside>`**
定义与主内容相关的侧边内容（如广告、引用）。
6. **`<footer>`**
定义页面或区块的底部（如版权信息、联系方式）。
---
### 二、多媒体
标签
1. **`<video>`**
嵌入视频文件，支持格式如 MP4、WebM。
```
html
<video src="movie.mp4" controls></video>
```
2. **`<
audio>`**
嵌入
音频文件，支持 MP3、WAV 等。
```
html
<
audio src="music.mp3" controls></
audio>
```
3. **`<canvas>`**
通过 JavaScript 绘制图形/动画。
```
html
<canvas id="myCanvas" width="200" height="100"></canvas>
```
---
### 三、表单增强
标签
1. **新输入类型**
```
html
<input type="email"> <!-- 邮箱验证 -->
<input type="date"> <!-- 日期选择器 -->
<input type="range"> <!-- 滑动条 -->
```
2. **`<datalist>`**
为输入框提供预定义选项。
```
html
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>
```
3. **`<progress>` 和 `<meter>`**
- `<progress>`：显示任务进度条。
- `<meter>`：表示标量测量值（如磁盘用量）。
---
### 四、其他实用
标签
1. **`<figure>` 与 `<figcaption>`**
关联图片/图表与其标题。
```
html
<figure>
<img src="chart.png">
<figcaption>图1: 销售数据</figcaption>
</figure>
```
2. **`<details>` 和 `<summary>`**
创建可折叠内容区块。
```
html
<details>
<summary>点击展开详情</summary>
<p>这里是隐藏的内容...</p>
</details>
```
3. **`<mark>`**
高亮显示文本（如搜索结果关键词）。
```
html
<p>搜索到<mark>
HTML5</mark>相关结果</p>
```
---
### 五、优势总结
1. **语义化**
提升代码可读性，利于 SEO 和无障碍访问。
2. **减少插件依赖**
原生支持
音视频，无需 Flash。
3. **交互增强**
表单验证、图形绘制更便捷。
⚠️ 注意：部分旧浏览器需通过 Polyfill 兼容新
标签。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
