HTML5 新元素
HTML5 在 HTML4 的基础上新增了大量元素，集中在三大方向：让结构更有意义的语义元素、播放与绘图的多媒体元素、能力更强的表单元素。这节课把 HTML5 的新元素分门别类过一遍。
新语义元素：让结构"有名有姓"
过去整页都是 <div id="header">，含义要靠 id 猜。HTML5 直接给出了语义化标签：
| 元素 | 含义 | 适用位置 |
|---|---|---|
| header | 页眉 | 页面或区块的顶部 |
| nav | 导航 | 导航链接的集合 |
| section | 区块 | 一组相关内容的容器 |
| article | 文章 | 可独立成篇的内容 |
| aside | 侧栏 | 附属、相关的内容 |
| footer | 页脚 | 页面或区块的底部 |
| main | 主体 | 页面的主要内容（一页一个） |
| figure / figcaption | 插图 / 图题 | 配图及其说明文字 |
<header>网站页眉</header>
<nav>首页 | 教程 | 关于</nav>
<main>
<article><h2>文章标题</h2><p>正文内容……</p></article>
<aside>相关推荐</aside>
</main>
<footer>版权信息</footer>
<!-- 在浏览器中显示为：语义清晰的页面骨架，外观与普通 div 无异 -->
新媒体元素
- <audio> 播放音频，<video> 播放视频。
- <source> 为媒体提供多种格式的资源，浏览器自动挑选能播放的一种。
- <canvas> 用脚本绘制位图图形，<svg> 用标签描述矢量图形（详见后文专章）。
新表单元素与输入类型
HTML5 为表单带来新控件与输入类型：datalist（输入联想）、output（显示计算结果）、progress（进度条）、meter（度量值）；输入类型 email、url、number、range、date、color、search 等，自带键盘优化与格式校验：
<input type="email" placeholder="name@example.com">
<input type="date">
<progress value="60" max="100"></progress>
<!-- 在浏览器中显示为：邮箱输入框、日期选择控件和一条进度条 -->
已不再使用的旧元素
HTML5 移除了纯外观类元素：<font>、<center>、<big>、<strike>、<frameset>、<frame>、<noframes> 等，这些效果如今都改由 CSS 实现。
易错点
- header、footer 不只属于整个页面，也可以作为 article、section 内部的头部与尾部。
- article 强调"可独立分发"的完整内容，与 section 别混用；拿不准时用 section。
- progress 与 meter 的外观由浏览器决定，不要期望各浏览器完全一致。
- 老版本 IE（8 及更早）不认识新元素，需要兼容时可引入 html5shiv 脚本。
小结：HTML5 新元素让页面结构更有语义、媒体与表单能力更强；新项目应优先使用语义标签，再配合 CSS 让它既规范又美观。