HTML5 新增的主要标签整理

一、语义化标签（让网页结构更清晰）

1. <header> 和 <footer>

• 定义：表示网页的「顶部区域」和「底部区域」。
• 场景：
  • <header>：放 Logo、导航栏、搜索框。
  • <footer>：放版权信息、联系方式。
• 示例：

  <header><h1>网站标题</h1><nav>导航链接</nav>
  </header>
  <footer>© 2023 版权所有</footer>
  

---

2. <nav>

• 定义：表示「导航栏」，专门放页面内的主要导航链接。
• 场景：主导航菜单、侧边栏目录。
• 示例：

  <nav><a href="/">首页</a><a href="/news">新闻</a>
  </nav>
  

---

3. <article> 和 <section>

• 定义：
  • <article>：表示独立的内容块（如一篇博客、一条新闻）。
  • <section>：表示文档中的「章节」或「段落」。
• 区别：
  • article 像一本杂志里的一篇文章，能独立存在。
  • section 像一本书里的某一章，需要上下文关联。
• 示例：

  <article><h2>如何学习编程</h2><section><h3>第一步：选择语言</h3><p>建议从 Python 开始...</p></section>
  </article>
  

---

4. <aside>

• 定义：表示与主内容相关的「侧边栏」或附加信息。
• 场景：推荐文章、广告、作者信息。
• 示例：

  <main>主要文章内容...</main>
  <aside><h3>相关阅读</h3><ul><li>推荐文章1</li><li>推荐文章2</li></ul>
  </aside>
  

---

二、多媒体标签（直接播放音视频）

5. <video> 和 <audio>

• 定义：无需插件即可播放视频和音频。
• 核心属性：
  • src：文件路径
  • controls：显示播放控件
  • autoplay：自动播放（部分浏览器受限）
• 示例：

  <video src="movie.mp4" controls width="600"></video>
  <audio src="music.mp3" controls></audio>
  

---

6. <canvas>

• 定义：画布，用 JavaScript 绘制图形、动画或游戏。
• 场景：数据可视化、小游戏、动态图表。
• 示例：

  <canvas id="myCanvas" width="200" height="100"></canvas>
  <script>const ctx = document.getElementById("myCanvas").getContext("2d");ctx.fillStyle = "red";ctx.fillRect(10, 10, 50, 50); // 画一个红色方块
  </script>
  

---

三、表单增强标签（更好用的输入控件）

7. <datalist>

• 定义：为输入框提供「下拉建议选项」。
• 场景：搜索框自动补全、快速选择常用值。
• 示例：

  <input list="browsers">
  <datalist id="browsers"><option value="Chrome"><option value="Firefox"><option value="Safari">
  </datalist>
  

---

8. <progress> 和 <meter>

• 定义：
  • <progress>：表示任务进度（如下载进度）。
  • <meter>：表示标量值（如磁盘使用量）。
• 示例：

  <progress value="70" max="100"></progress> <!-- 70%进度 -->
  <meter value="3" min="0" max="10">3/10</meter> <!-- 类似温度计 -->
  

---

四、其他实用标签

9. <figure> 和 <figcaption>

• 定义：表示图片/图表及其标题。
• 场景：图文搭配说明。
• 示例：

  <figure><img src="chart.png" alt="销售图表"><figcaption>图1：2023年销售数据</figcaption>
  </figure>
  

---

10. <time>

• 定义：标记时间或日期，方便机器识别。
• 示例：

  <p>发布时间：<time datetime="2023-09-15">2023年9月15日</time></p>
  

---

11. <mark>

• 定义：高亮显示文本（像用荧光笔标记）。
• 示例：

  <p>搜索关键词：<mark>HTML5</mark></p>
  

---

总结：HTML5 新标签的优势

1. 语义更清晰：让代码结构像报纸排版一样一目了然。
2. 功能更强大：直接嵌入视频、绘图，无需插件。
3. 开发更高效：表单控件和语义标签减少 JavaScript 依赖。