HTML5 标签语法详解
概述
HTML5 是 HTML 标准的第五次重大版本，于 2014 年正式发布。相比 HTML4，HTML5 引入了一系列新的语义标签、多媒体元素和 API，大幅提升了 Web 开发效率。
新增语义标签
HTML5 引入的语义标签让页面结构更清晰：
<header>页面头部</header>
<nav>导航栏</nav>
<article>文章内容</article>
<section>章节区块</section>
<aside>侧边栏</aside>
<footer>页面底部</footer>
与 <div> 的区别
- <code><div></code> 是无语义的通用容器
- 语义标签让搜索引擎和辅助技术更好理解页面结构
- 利于 SEO 和无障碍访问
多媒体标签
视频标签
<video width="640" height="480" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 video 标签
</video>
常用属性：
- <code>controls</code>：显示播放控制条
- <code>autoplay</code>：自动播放
- <code>loop</code>：循环播放
- <code>muted</code>：静音播放
音频标签
<audio controls>
<source src="music.mp3" type="audio/mpeg">
您的浏览器不支持 audio 标签
</audio>
表单增强
HTML5 新增了大量表单输入类型：
<input type="email" placeholder="请输入邮箱">
<input type="date" min="2020-01-01" max="2030-12-31">
<input type="number" min="1" max="100" step="1">
<input type="range" min="0" max="100">
<input type="color" value="#ff0000">
<input type="tel" pattern="[0-9]{11}">
<input type="url" placeholder="请输入网址">
<input type="search" results="5">
绘图 Canvas
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 200, 200);
</script>
本地存储
HTML5 提供了本地存储 API：
// localStorage - 持久存储
localStorage.setItem('username', '张三');
localStorage.getItem('username');
// sessionStorage - 会话级存储
sessionStorage.setItem('token', 'abc123');
总结
HTML5 的新特性让 Web 开发更高效：
- 语义标签改善页面结构
- 多媒体标签原生支持音视频
- 表单增强提升用户体验
- Canvas 和本地存储拓展了应用场景