个人主页：Guiat
归属专栏：HTML CSS JavaScript
文章目录
正文
HTML5 是 HTML 标准的第五个主要版本，引入了许多新元素和 API，极大地扩展了网页的功能。以下是 HTML5 的主要新特性详解。
1. 语义化标签
HTML5 引入了一系列语义化标签，使文档结构更加清晰。
<header>网页头部</header>
<nav>导航菜单</nav>
<main>
<article>
<section>文章第一部分</section>
<section>文章第二部分</section>
</article>
<aside>侧边栏内容</aside>
</main>
<footer>网页底部</footer>
1.1 主要语义化标签及用途
| 标签 | 描述 |
|---|---|
<header> | 页面或区段的头部 |
<nav> | 导航链接区域 |
<main> | 文档主体内容 |
<article> | 独立的内容块 |
<section> | 文档中的区段 |
<aside> | 侧边栏内容 |
<footer> | 页面或区段的底部 |
<figure> | 图像、图表等媒体内容 |
<figcaption> | 图像或图表的标题 |
<mark> | 高亮显示的文本 |
<time> | 日期或时间 |
<details> | 用户可展开查看的详细信息 |
<summary> | <details> 元素的标题 |
2. 表单增强
2.1 新增输入类型
<!-- 邮箱 -->
<input type="email" placeholder="请输入邮箱">
<!-- 网址 -->
<input type="url" placeholder="请输入网址">
<!-- 数字 -->
<input type="number" min="1" max="100" step="1">
<!-- 范围滑块 -->
<input type="range" min="0" max="100" value="50">
<!-- 日期选择器 -->
<input type="date">
<!-- 时间选择器 -->
<input type="time">
<!-- 日期时间选择器 -->
<input type="datetime-local">
<!-- 月份选择器 -->
<input type="month">
<!-- 周选择器 -->
<input type="week">
<!-- 颜色选择器 -->
<input type="color">
<!-- 搜索框 -->
<input type="search">
<!-- 电话号码 -->
<input type="tel" pattern="[0-9]{11}">
2.2 表单属性和验证
<form>
<!-- 必填字段 -->
<input type="text" required>
<!-- 自动聚焦 -->
<input type="text" autofocus>
<!-- 自动完成 -->
<input type="text" autocomplete="on">
<!-- 占位符文本 -->
<input type="text" placeholder="请输入用户名">
<!-- 模式验证 -->
<input type="text" pattern="[A-Za-z]{3}">
<!-- 多个选项 -->
<input type="file" multiple>
<!-- 表单验证 -->
<input type="email" required>
<input type="submit" formnovalidate>
</form>
3. 多媒体支持
3.1 音频
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持音频标签。
</audio>
3.2 视频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持视频标签。
</video>
3.3 音视频API
HTML5 提供了丰富的 JavaScript API 来控制音视频：
// 获取视频元素
var video = document.getElementById("myVideo");
// 播放
video.play();
// 暂停
video.pause();
// 设置当前时间
video.currentTime = 5;
// 设置音量 (0-1)
video.volume = 0.5;
// 设置播放速率
video.playbackRate = 1.5;
// 事件监听
video.addEventListener("ended", function() {
console.log("视频播放结束");
});
4. Canvas 绘图
Canvas 是 HTML5 引入的强大绘图功能，可以通过 JavaScript 在网页上绘制图形。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 Canvas 元素
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 50, 50);
// 绘制文本
ctx.font = "30px Arial";
ctx.fillStyle = "#000000";
ctx.fillText("Hello", 80, 50);
// 绘制线条
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
// 绘制圆形
ctx.beginPath();
ctx.arc(100, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
5. SVG 矢量图形
SVG 是一种基于 XML 的矢量图形格式，可以直接嵌入 HTML 中。
<svg width="200" height="100">
<rect width="100" height="80" x="10" y="10" fill="blue" />
<circle cx="150" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<text x="10" y="50" fill="white">SVG 文本</text>
</svg>
6. 地理定位
HTML5 提供了地理定位 API，可以获取用户的地理位置。
<button onclick="getLocation()">获取位置</button>
<p id="demo"></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
document.getElementById("demo").innerHTML = "该浏览器不支持地理定位。";
}
}
function showPosition(position) {
document.getElementById("demo").innerHTML = "纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
document.getElementById("demo").innerHTML = "用户拒绝了地理定位请求。"
break;
case error.POSITION_UNAVAILABLE:
document.getElementById("demo").innerHTML = "位置信息不可用。"
break;
case error.TIMEOUT:
document.getElementById("demo").innerHTML = "获取用户位置超时。"
break;
case error.UNKNOWN_ERROR:
document.getElementById("demo").innerHTML = "发生未知错误。"
break;
}
}
</script>
7. 本地存储
HTML5 提供了两种客户端存储数据的新方法：
7.1 localStorage
数据永久保存，除非手动删除。
// 存储数据
localStorage.setItem("username", "张三");
// 读取数据
var username = localStorage.getItem("username");
// 删除特定数据
localStorage.removeItem("username");
// 清空所有数据
localStorage.clear();
7.2 sessionStorage
数据在页面会话结束时被清除（关闭页面或浏览器）。
// 存储数据
sessionStorage.setItem("tempData", "临时数据");
// 读取数据
var data = sessionStorage.getItem("tempData");
// 删除特定数据
sessionStorage.removeItem("tempData");
// 清空所有数据
sessionStorage.clear();
8. Web Workers
Web Workers 允许在后台线程中运行 JavaScript，不会影响页面性能。
<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<script>
var w;
function startWorker() {
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("worker.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "您的浏览器不支持 Web Workers";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
worker.js 文件内容：
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()", 500);
}
timedCount();
9. WebSocket
WebSocket 提供了一种在客户端和服务器之间建立持久连接的方法。
// 创建 WebSocket 连接
var socket = new WebSocket("ws://example.com/socket");
// 连接建立时触发
socket.onopen = function(event) {
console.log("连接已建立");
// 发送数据到服务器
socket.send("Hello Server!");
};
// 接收服务器数据
socket.onmessage = function(event) {
console.log("收到数据: " + event.data);
};
// 连接关闭时触发
socket.onclose = function(event) {
console.log("连接已关闭");
};
// 发生错误时触发
socket.onerror = function(error) {
console.log("WebSocket 错误: " + error);
};
10. 拖放 API
HTML5 支持原生拖放功能。
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"
style="width:200px; height:100px; border:1px solid black;"></div>
<img id="drag1" src="img.jpg" draggable="true" ondragstart="drag(event)"
width="150" height="50">
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
11. 应用缓存 (已废弃)
注意：应用缓存 (AppCache) 已被废弃，推荐使用 Service Workers 代替。
12. 服务器发送事件 (SSE)
服务器发送事件允许网页从服务器接收自动更新。
<h1>服务器发送事件示例</h1>
<div id="result"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
source.onerror = function(event) {
console.log("发生错误");
source.close();
};
} else {
document.getElementById("result").innerHTML = "您的浏览器不支持服务器发送事件";
}
</script>
13. 新增全局属性
HTML5 新增了多个全局属性，可用于所有 HTML 元素：
<!-- contenteditable: 允许用户编辑元素内容 -->
<div contenteditable="true">这段文字可以被编辑</div>
<!-- data-*: 自定义数据属性 -->
<div data-user-id="123" data-role="admin">用户信息</div>
<!-- hidden: 隐藏元素 -->
<p hidden>这段文字不会显示</p>
<!-- spellcheck: 拼写检查 -->
<textarea spellcheck="true">拼写会被检查</textarea>
<!-- translate: 指定是否翻译元素内容 -->
<p translate="no">不要翻译这段文字</p>
14. 响应式图像
HTML5 引入了 <picture> 元素和 srcset 属性，用于响应式图像。
<!-- 使用 srcset 属性 -->
<img src="small.jpg"
srcset="medium.jpg 1000w, large.jpg 2000w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="响应式图像">
<!-- 使用 picture 元素 -->
<picture>
<source media="(min-width: 1200px)" srcset="large.jpg">
<source media="(min-width: 600px)" srcset="medium.jpg">
<img src="small.jpg" alt="响应式图像">
</picture>
15. HTML5 API 使用统计
- Canvas 和本地存储是最广泛采用的 HTML5 API
- 地理定位和拖放 API 的使用也相当普遍
- WebSocket 在实时应用中的采用率持续上升
- Web Workers 在需要处理复杂计算的应用中越来越受欢迎
16. HTML5 兼容性
虽然现代浏览器都支持大多数 HTML5 特性，但在使用某些新特性时，仍然需要考虑兼容性问题。
<!-- 检测特性支持 -->
<script>
// 检测 Canvas 支持
if (!!document.createElement('canvas').getContext) {
console.log("支持 Canvas");
}
// 检测本地存储支持
if (typeof(Storage) !== "undefined") {
console.log("支持本地存储");
}
// 检测地理定位支持
if (navigator.geolocation) {
console.log("支持地理定位");
}
// 检测 WebSocket 支持
if ("WebSocket" in window) {
console.log("支持 WebSocket");
}
</script>
HTML5 的引入极大地丰富了 Web 开发的可能性，使网页不再仅仅是静态文档，而是能够提供丰富交互体验的应用平台。随着浏览器支持的不断完善，HTML5 已成为现代 Web 开发的标准。
结语
感谢您的阅读！期待您的一键三连！欢迎指正！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
