HTML5的新特性 新方法 新规范

HTML5 是 HTML 的最新版本，带来了许多新特性和改进，旨在提高 Web 应用的功能性、可用性和用户体验。以下是 HTML5 的一些主要新特性：

1. 新的语义元素
HTML5 引入了一些新的语义元素，使得文档结构更加清晰和语义化：

<header>：定义文档的头部区域。
<footer>：定义文档的底部区域。
<nav>：定义导航链接的部分。
<article>：定义独立的内容块。
<section>：定义文档中的一个区域。
<aside>：定义与主内容相关的侧边内容。
<figure> 和 <figcaption>：用于标记图像及其说明。
2. 表单控件的增强
HTML5 增强了表单控件，提供了新的输入类型和属性：

新的输入类型：email、url、date、time、range、color 等。
新的表单属性：placeholder、required、pattern、autocomplete 等。
3. 多媒体支持
HTML5 原生支持音频和视频，简化了多媒体的嵌入：

<audio>：用于嵌入音频内容。
<video>：用于嵌入视频内容。
支持多种格式（如 MP3、MP4、WebM 等），并提供了控制选项。
4. Canvas 元素
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>

5. 本地存储
HTML5 提供了本地存储 API，允许在用户的浏览器中存储数据：

localStorage：用于持久存储数据，数据在浏览器关闭后仍然存在。
sessionStorage：用于会话存储数据，数据在浏览器标签页关闭后消失。
6. 地理定位
HTML5 提供了地理定位 API，允许网页获取用户的地理位置：

navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude, position.coords.longitude);
});

7. WebSockets
HTML5 引入了 WebSockets，允许在客户端和服务器之间建立持久的双向通信通道，适用于实时应用。

8. 拖放 API
HTML5 提供了拖放 API，允许用户通过拖动和放置来交互，增强了用户体验。

9. SVG 和 MathML 支持
HTML5 原生支持 SVG（可缩放矢量图形）和 MathML（数学标记语言），使得在网页中嵌入矢量图形和数学公式变得更加简单。

10. Web Workers
HTML5 引入了 Web Workers，允许在后台线程中运行 JavaScript，避免阻塞主线程，提高性能。