HTML5 新元素：一页速查 + 即抄即用

HTML5 并不是多了什么“黑科技”，而是给网页加了一堆有名字的标签，让结构和功能一眼能看懂。下面这份“人话教程”带你 10 分钟认全它们，顺便把「什么时候用、怎么用、有啥坑」一次讲清。

1. 语义结构组：告别 <div class="header">

记忆口诀：“头 nav 主，文章段，旁脚注”

2. 多媒体三剑客：插件时代终结

<!-- 音频 -->
<audio controls loop preload="metadata">
  <source src="bgm.mp3" type="audio/mpeg">
</audio>

<!-- 视频 -->
<video width="640" height="360" controls poster="cover.jpg">
  <source src="trailer.mp4" type="video/mp4">
</video>

<!-- 画布（图形容器） -->
<canvas id="draw" width="300" height="150"></canvas>
<script>
  const ctx = draw.getContext('2d');
  ctx.fillStyle = '#FF6B6B';
  ctx.fillRect(10, 10, 100, 80);
</script>

• 老浏览器不认？在标签里写提示文字或放 Flash 地址即可回退。
• Canvas 只是“画板”，真正绘图靠 JavaScript；想矢量图用 <svg>。

3. 表单利器：少写正则、键盘自动切

<input type="email" required>
<input type="date">
<input type="range" min="0" max="100" value="50">
<input type="color">
<meter min="0" max="100" value="70">70%</meter>
<progress max="100" value="30">30%</progress>

• 手机会自动弹出对应键盘（email → @ 键）。
• required 原生校验，无需 JS 就能拦空提交。
• meter = 刻度/仪表盘；progress = 任务进度条，别混用。

4. 图 & 细节：让图片/术语自带说明书

<figure>
  <img src="pie-chart.png" alt="销售占比">
  <figcaption>图 1：2024 年 Q1 各品类销售占比</figcaption>
</figure>

<details>
  <summary>查看更多</summary>
  <p>这里是折叠内容，点“查看更多”才展开。</p>
</details>

• figure 可放图片、代码、表格；figcaption 是标题。
• details/summary 做「FAQ 折叠」零 JS，SEO 也能抓到内容。

5. 标记 & 进度：高亮、刻度一次搞定

<p>明天 <mark>务必</mark> 提交代码。</p>

下载速度：<meter value="60" min="0" max="100"
                 low="33" high="70" optimum="90">60 Mbps</meter>

• mark 默认黄底黑字，适合搜索关键词高亮。
• meter 的 low/high/optimum 给浏览器做颜色提示（绿/黄/红）。

6. 兼容速查：IE 老骨头怎么喂

一句话：现代项目可无视 IE ≤ 8；政府/银行内网才考虑补丁。

7. 什么时候别用新标签

1. 仅为了“样式” → 用 CSS，别拿 <section> 当 div 使。
2. 纯粹脚本行为 → 按钮用 <button>，而不是 <a class="btn">。
3. 一段文字没有标题 → 用 <div>，而不是裸 <section>。

8. 打包记忆口诀

“头 nav 主文章段，旁脚注；
音视画布画进度，日期颜色 range 录；
figure 配图 details 折叠，mark 高亮 meter 尺。”

背下来，打开 IDE 就能噼里啪啦敲出有语义、好维护、SEO 友好的 HTML5 页面。祝你编码愉快！