在HTML5中，有许多令人印象深刻的新特性，以下是一些最常见和引人注意的特性的示例代码：
- 画布（Canvas）：用于绘制图形、文本、图片等。
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 75);
</script>
- 数据属性（Data API）：允许向元素添加自定义数据属性。
<div id="example" data-role="page" data-title="Hello World"></div>
<script>
var div = document.getElementById('example');
console.log(div.dataset.role); // 输出: "page"
console.log(div.dataset.title); // 输出: "Hello World"
</script>
- 服务器发送事件（Server-Sent Events，SSE）：实现服务器到客户端的单向通信。
<script>
if(typeof(EventSource)!=="undefined") {
var source=new EventSource("/path/to/my/stream");
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...";
}
</script>
- 请求验证（Web Workers）：在后台线程执行复杂计算，不阻塞用户界面。
if(typeof(Worker)!=="undefined") {
var myWorker=new Worker("worker.js");
myWorker.onmessage=function(e) {
console.log(e.data);
};
} else {
console.log("Sorry, your browser does not support Web Workers.");
}
- import和template元素：用于导入HTML模板。
<template id="myTemplate">
<h1>Web Components</h1>
<p>This is a template example.</p>
</template>
<script>
var templateContent = document.getElementById('myTemplate').content;
document.body.appendChild(templateContent.cloneNode(true));
</script>
- 输入类型（Input types）：例如date、time、email、url等。
<form>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
- 地理位置（Geolocation API）：获取用户的地理位置。
navigator.geolocation.getCurrentPosition(function(position) {
console.log("Latitude is :", position.coords.latitude);
co