文章目录
- 前言
- **一、语义化标签（Semantic Elements）**
- **二、多媒体支持（Audio & Video）**
- **三、图形与绘图（Canvas & SVG）**
- **1. `<canvas>`**
- **2. SVG 内联支持**
- **四、表单增强（Form Features）**
- **1. 新输入类型**
- **2. 新属性**
- **五、本地存储（Web Storage）**
- **六、地理定位（Geolocation）**
- **七、拖放 API（Drag & Drop）**
- **八、Web Workers**
- **九、WebSocket**
- **十、其他重要更新**
- **总结**
前言
HTML5 是一次重大的标准升级，引入了大量新特性和 API，旨在支持现代富媒体应用和更语义化的 Web 结构。以下是核心更新功能的详细说明及示例：
一、语义化标签（Semantic Elements）
目的：增强内容的结构化描述，提升 SEO 和无障碍访问能力。
新增标签：
<header>：页面或区块的头部<nav>：导航链接<section>：文档独立区块<article>：独立内容（如博客/新闻）<aside>：侧边栏或附属内容<footer>：页面或区块的底部<main>：文档主要内容<figure>+<figcaption>：媒体与标题组合<mark>：高亮文本
示例：
<body><header><h1>网站标题</h1><nav><a href="/home">首页</a> | <a href="/about">关于</a></nav></header><main><article><h2>文章标题</h2><p>正文内容...</p><figure><img src="image.jpg" alt="示例图片"><figcaption>图片说明</figcaption></figure></article><aside><h3>相关链接</h3><ul>...</ul></aside></main><footer><p>© 2023 版权信息</p></footer>
</body>
二、多媒体支持（Audio & Video）
目的：原生支持音视频播放，无需 Flash 等插件。
标签：
<video>：嵌入视频<audio>：嵌入音频
属性：controls（显示控制条）、autoplay、loop、muted、poster（视频封面）
示例：
<video controls width="600" poster="preview.jpg"><source src="movie.mp4" type="video/mp4"><source src="movie.webm" type="video/webm">您的浏览器不支持视频播放
</video><audio controls><source src="audio.mp3" type="audio/mpeg">您的浏览器不支持音频播放
</audio>
三、图形与绘图（Canvas & SVG）
1. <canvas>
目的：通过 JavaScript 动态绘制 2D/3D 图形。
示例：绘制红色矩形
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>const ctx = document.getElementById("myCanvas").getContext("2d");ctx.fillStyle = "#FF0000";ctx.fillRect(0, 0, 150, 75);
</script>
2. SVG 内联支持
目的：直接嵌入矢量图形。
示例：绘制圆形
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
四、表单增强（Form Features）
1. 新输入类型
email：邮箱验证url：URL 验证number：数字输入range：滑块（<input type="range" min="0" max="100">）date/time：日期时间选择器search：搜索框color：颜色选择器
2. 新属性
placeholder：输入提示required：必填字段autofocus：自动聚焦pattern：正则验证（如pattern="[A-Za-z]{3}"）datalist：输入建议列表
示例：
<form><label>邮箱：<input type="email" required placeholder="user@example.com"></label><label>日期：<input type="date"></label><label>音量：<input type="range" min="0" max="100"></label><label>浏览器：<input list="browsers"><datalist id="browsers"><option value="Chrome"><option value="Firefox"></datalist></label><input type="submit">
</form>
五、本地存储（Web Storage）
目的：替代 Cookie，提供更大容量的本地存储。
localStorage：永久存储（直到手动清除）sessionStorage：会话级存储（关闭标签页失效）
示例：
// 存储数据
localStorage.setItem("username", "Alice");// 读取数据
alert(localStorage.getItem("username")); // 输出 "Alice"// 删除数据
localStorage.removeItem("username");
六、地理定位（Geolocation）
目的：获取用户地理位置（需用户授权）。
示例：
navigator.geolocation.getCurrentPosition(position => {alert(`纬度：${position.coords.latitude}，经度：${position.coords.longitude}`);},error => {console.error("定位失败：", error);}
);
七、拖放 API（Drag & Drop）
目的：原生支持元素拖拽操作。
步骤：
- 设置元素
draggable="true" - 监听事件：
dragstart,dragover,drop
示例：
<div id="drag-target" draggable="true">拖拽我</div>
<div id="drop-area">放置区域</div><script>const target = document.getElementById("drag-target");const dropArea = document.getElementById("drop-area");target.addEventListener("dragstart", e => {e.dataTransfer.setData("text", e.target.id);});dropArea.addEventListener("dragover", e => {e.preventDefault(); // 允许放置});dropArea.addEventListener("drop", e => {e.preventDefault();const data = e.dataTransfer.getData("text");e.target.appendChild(document.getElementById(data));});
</script>
八、Web Workers
目的：在后台线程运行脚本，避免阻塞主线程。
示例：
// 主线程
const worker = new Worker("worker.js");
worker.postMessage("开始计算"); // 发送数据
worker.onmessage = e => alert(e.data); // 接收结果// worker.js
self.onmessage = e => {const result = doHeavyCalculation(); // 耗时计算self.postMessage(result); // 返回结果
};
九、WebSocket
目的：实现全双工实时通信（如聊天室）。
示例：
const socket = new WebSocket("wss://example.com/socket");socket.onopen = () => {socket.send("Hello Server!");
};socket.onmessage = e => {console.log("收到消息：", e.data);
};
十、其他重要更新
- 离线应用（Application Cache）
通过manifest文件缓存资源（已废弃，推荐使用 Service Worker）。 - 语义化文本标签
<time>（日期时间）、<meter>（度量值）、<progress>（进度条）。 - 增强的
<iframe>
新增sandbox属性限制 iframe 行为（如禁止脚本）。 - 原生模态框
<dialog>元素：<dialog open>这是一个对话框！</dialog>
总结
HTML5 通过语义化标签、多媒体支持、Canvas/绘图、表单增强、本地存储、地理定位等特性，彻底变革了 Web 开发范式，使其从文档展示平台升级为功能强大的应用平台。这些特性与现代 CSS3 和 JavaScript API 结合，构成了现代 Web 技术的基石。
