一、語義化標簽（讓網頁結構更清晰）

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