1.3 HTML5的新特性
HTML5 带来了众多革命性的新特性，使 Web 开发能力得到质的飞跃。本节将全面介绍这些改变游戏规则的功能，并通过实际案例展示它们的应用价值。
一、语义化标签体系
1. 文档结构标签
<header> <!-- 页眉/文章头部 -->
<nav> <!-- 导航栏 -->
<main> <!-- 主内容区 -->
<article> <!-- 独立内容块 -->
<section> <!-- 文档章节 -->
<aside> <!-- 侧边栏/附加内容 -->
<footer> <!-- 页脚/文章尾部 -->
优势：
- 提升可访问性（屏幕阅读器友好）
- 改善SEO（搜索引擎更容易理解内容结构）
- 代码可读性更强
案例：传统布局 vs HTML5语义化布局
<!-- 传统方式 -->
<div id="header"></div>
<div id="nav"></div>
<div class="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
<!-- HTML5方式 -->
<header></header>
<nav></nav>
<main>
<article></article>
<aside></aside>
</main>
<footer></footer>
二、多媒体支持
1. 原生音视频
<video controls width="600" poster="preview.jpg">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持HTML5视频
</video>
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
</audio>
支持格式：
| 格式 | 视频编码 | 音频编码 | 浏览器支持 |
|---|---|---|---|
| MP4 | H.264/AVC | AAC/MP3 | 全平台 |
| WebM | VP8/VP9 | Vorbis/Opus | 除IE外主流 |
| Ogg | Theora | Vorbis | Firefox/Chrome |
2. 字幕支持
<video>
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
</video>
三、图形与动画
1. Canvas 2D绘图
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);
</script>
应用场景：
- 数据可视化
- 游戏开发
- 图片处理
2. SVG矢量图形
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
四、增强的表单功能
1. 新增输入类型
| 类型 | 用途 | 移动端效果 |
|---|---|---|
type="email" |
邮箱验证 | 弹出@键盘 |
type="url" |
URL验证 | 弹出.com键盘 |
type="tel" |
电话号码 | 弹出数字键盘 |
type="date" |
日期选择器 | 原生日期选择控件 |
type="range" |
滑块控件 | 触摸友好 |
2. 表单新属性
<input type="text" required placeholder="请输入姓名">
<input type="number" min="1" max="100" step="5">
<input type="search" autocomplete="off">
五、本地存储方案
1. Web Storage
// 本地持久化存储
localStorage.setItem('username', 'John');
const user = localStorage.getItem('username');
// 会话级存储
sessionStorage.setItem('tempData', JSON.stringify(data));
2. IndexedDB（客户端数据库）
const request = indexedDB.open('myDatabase', 1);
request.onsuccess = (event) => {
const db = event.target.result;
const transaction = db.transaction('store', 'readwrite');
const store = transaction.objectStore('store');
store.add({ id: 1, name: 'Product' });
};
六、设备API集成
1. 地理位置
navigator.geolocation.getCurrentPosition(
(pos) => {
console.log(`纬度: ${pos.coords.latitude}`);
console.log(`经度: ${pos.coords.longitude}`);
},
(err) => console.error(err)
);
2. 设备方向
window.addEventListener('deviceorientation', (event) => {
console.log(`Alpha: ${event.alpha}`); // 绕Z轴旋转
console.log(`Beta: ${event.beta}`); // 绕X轴旋转
console.log(`Gamma: ${event.gamma}`); // 绕Y轴旋转
});
七、通信与多线程
1. WebSocket
const socket = new WebSocket('wss://example.com');
socket.onmessage = (event) => {
console.log(`收到消息: ${event.data}`);
};
socket.send('Hello Server!');
2. Web Workers
// 主线程
const worker = new Worker('worker.js');
worker.postMessage('开始计算');
worker.onmessage = (e) => console.log(e.data);
// worker.js
self.onmessage = (e) => {
const result = heavyCalculation();
self.postMessage(result);
};
八、CSS3协同增强
虽然CSS3是独立规范，但常与HTML5配合使用：
1. 响应式设计基础
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. 媒体查询
@media (max-width: 768px) {
.sidebar { display: none; }
}
综合案例：现代化个人资料页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人资料</title>
<style>
/* CSS3样式 */
@media (prefers-color-scheme: dark) {
body { background: #333; color: white; }
}
</style>
</head>
<body>
<header>
<h1>个人资料</h1>
<nav>
<a href="#info">基本信息</a> |
<a href="#skills">技能</a>
</nav>
</header>
<main>
<article id="info">
<h2>基本信息</h2>
<form>
<label>姓名:
<input type="text" required placeholder="请输入姓名">
</label>
<label>出生日期:
<input type="date" name="birthday">
</label>
<input type="submit" value="更新">
</form>
</article>
<section id="skills">
<h2>技能雷达图</h2>
<canvas id="skillChart" width="300" height="300"></canvas>
</section>
</main>
<footer>
<p>最后更新: <time datetime="2023-08-20">2023年8月20日</time></p>
</footer>
<script>
// Canvas绘图
const canvas = document.getElementById('skillChart');
const ctx = canvas.getContext('2d');
// 绘制雷达图代码...
// 本地存储
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
localStorage.setItem('userName', e.target[0].value);
});
</script>
</body>
</html>
浏览器支持检查
开发时应始终检查特性支持情况：
// 检测Canvas支持
if (!document.createElement('canvas').getContext) {
alert('您的浏览器不支持Canvas！');
}
// 现代检测方式
if (!('geolocation' in navigator)) {
console.log('地理位置API不可用');
}