HTML5中一些酷炫又有趣的新特性代码整理汇总

在HTML5中，有许多令人印象深刻的新特性，以下是一些最常见和引人注意的特性的示例代码：

1. 画布（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>

2. 数据属性（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>

3. 服务器发送事件（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>

4. 请求验证（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.");
}

5. 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>

6. 输入类型（Input types）：例如date、time、email、url等。

<form>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

7. 地理位置（Geolocation API）：获取用户的地理位置。

navigator.geolocation.getCurrentPosition(function(position) {
  console.log("Latitude is :", position.coords.latitude);
  co