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 依赖。