HTML5新特性

HTML5 引入了许多新特性，使得网页开发更为方便和强大。以下是一些主要的新特性及它们的示例：

1. 语义化标签：提供更有意义的HTML标记，如 <article>、 <section>、 <nav> 等。

<article>
  <h2>文章标题</h2>
  <p>这是一篇文章的内容。</p>
</article>

2. 音视频处理API：通过 <audio> 和 <video> 标签嵌入音视频。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  你的浏览器不支持 HTML5 video 标签。
</video>

3. canvas / webGL：用于动态绘制图像和图形。

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
</script>

4. 拖拽释放(Drag and drop) API：实现元素拖拽功能。

<div draggable="true" ondragstart="drag(event)">拖动我</div>

5. history API：管理浏览器历史记录。

window.history.pushState({page: "home"}, "title 1", "/home");

6. requestAnimationFrame：优化动画效果。

function animate() {
  requestAnimationFrame(animate);
  // 动画代码
}
animate();

7. 地理位置(Geolocation)API：获取用户地理位置。

navigator.geolocation.getCurrentPosition(function(position) {
  console.log("纬度: " + position.coords.latitude + ", 经度: " + position.coords.longitude);
});

8. webSocket：实现实时双向通信。

var socket = new WebSocket("ws://example.com/socketserver");
socket.onmessage = function(event) {
  console.log(event.data);
};

9. web存储 (localStorage、SessionStorage)：客户端数据存储。

localStorage.setItem("key", "value");
var data = localStorage.getItem("key");

10. 表单控件：如 calendar、date、time、email、url、search 等新输入类型。

<input type="date">
<input type="email">
<input type="url">
<input type="search">