HTML5 提供了许多强大的新功能，但要精确地列出最常用或最有影响力的十大功能可能很有争议。这里，我将列出一些我认为在现代web开发中非常常用和重要的HTML5特性。
- 离线存储（LocalStorage/SessionStorage）：使网页应用可以存储大量数据，永久保存会话数据。
// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
var data = localStorage.getItem('key');
- 画布（Canvas）：提供了一个便捷的方式来绘制图形、图像和动画。
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 75);
- 视频和音频（Media）：提供了播放视频和音频的标准方法。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
- SVG（Scalable Vector Graphics）：使你能够创建灵活的可缩放的矢量图形。
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
- 地理定位（Geolocation）：使网页应用可以获取用户的地理位置。
navigator.geolocation.getCurrentPosition(function(position) {
console.log("Latitude is :", position.coords.latitude);
console.log("Longitude is :", position.coords.longitude);
});
- 服务器发送事件（Server-Sent Events）：实现服务器向浏览器推送数据。
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
- 表单控件：日期选择器、时间选择器、数值输入等。
<input type="date">
<input type="time">
<input type="number">
- Web Workers：在后台运行脚本，不影响浏览器的UI响应。
var worker = new Worker('worker.js');
- WebSocket：实现浏览器和服务器之间的全双工通信。
var ws = new WebSocket("ws://localhost:80/demo");
- 表单验证：内置验证电子邮件、URL、数据等的输入字段。
<form action="demo_form.php" method="post">
Email: <input type="email" name="user_email">
<input type="submit">
</form>
这些都是HTML5的功能，它们可以使网页开发更加强大和有趣，并且提高用户体验。