引入
HTML5 是现代 HTML 的重要版本，增加了很多更适合现代网页开发的能力。
它让网页不只是展示文档，也更适合承载多媒体、表单、语义结构和复杂应用。
正文
定义
定义
HTML5 是 HTML 的一个重要版本，加入了语义化标签、多媒体标签、新表单类型、本地存储、画布等新能力。
日常学习中，不需要一次记住所有新特性，先掌握最常用的部分即可。
更简单的文档声明
HTML5 的文档声明更简洁。
<!DOCTYPE html>它告诉浏览器使用标准模式解析页面。
语义化标签
HTML5 增加了很多语义化结构标签。
<header>页面头部</header>
<nav>导航</nav>
<main>主要内容</main>
<article>文章</article>
<section>章节</section>
<aside>侧边内容</aside>
<footer>页面底部</footer>这些标签让页面结构更清楚，也有助于 SEO 和可访问性。
多媒体标签
HTML5 支持直接使用 <audio> 和 <video> 嵌入音频、视频。
<audio src="music.mp3" controls></audio>
<video src="movie.mp4" controls width="400"></video>以前网页播放多媒体常依赖插件，现在可以直接使用原生标签。
新表单输入类型
HTML5 增加了很多新的 input 类型。
<input type="email" name="email">
<input type="number" name="age">
<input type="date" name="birthday">
<input type="url" name="website">这些类型可以让浏览器提供更合适的输入体验和基础校验。
表单属性
HTML5 也增加了一些常用表单属性。
<input type="text" name="username" placeholder="请输入用户名" required>常见属性：
placeholder用于显示输入提示required表示必填autofocus表示页面加载后自动聚焦pattern可以设置输入格式规则
Canvas
<canvas> 用于在网页中绘制图形。
<canvas id="myCanvas" width="300" height="150"></canvas><canvas> 本身只是画布，真正绘制内容通常需要 JavaScript。
SVG
HTML5 中可以直接使用 SVG 图形。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>SVG 适合图标、矢量图等内容，放大后不容易失真。
本地存储
HTML5 提供了 Web Storage，例如 localStorage 和 sessionStorage。
<script>
localStorage.setItem("username", "Tom");
</script>这属于浏览器能力，具体使用需要 JavaScript。
地理位置
HTML5 提供了获取用户地理位置的能力。
<script>
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude);
});
</script>这需要用户授权，不能偷偷获取。
特点
- HTML5 使用更简单的
<!DOCTYPE html> - 增加了语义化标签，让结构更清楚
- 支持
<audio>和<video>原生多媒体 - 增加了更多表单输入类型
- 支持
<canvas>绘图 - 支持 SVG 图形
- 提供本地存储、地理位置等浏览器能力
注意事项
- HTML5 新特性很多，不需要一次全部记住
- 新表单类型只是浏览器基础校验，不能代替后端校验
canvas、本地存储、地理位置通常需要 JavaScript 配合- 地理位置等能力涉及隐私，需要用户授权
- 语义化标签不会自动让页面变好看，样式仍然需要 CSS
- 使用新特性时要考虑浏览器兼容性
理解
可以把 HTML5 理解为“更适合现代网页的 HTML”。
它不只是增加了几个标签，而是让网页能更好地表达结构、播放媒体、处理表单和承载交互。
初学时优先掌握语义化标签、多媒体标签和新表单类型就够用了。
引出
理解 HTML5 新特性之后，可以继续学习 HTML 语义化标签、HTML 多媒体 和 HTML 表单。