HTML5 有哪些更新
... 2025-7-10 大约 7 分钟
# 增加新的语义化标签
HTML 参考手册 - HTML5 标准 (opens new window)
<header> 定义了文档的头部区域
<footer> 定义 section 或 document 的页脚。
<nav> 定义导航链接的部分
<aside> 侧边栏内容
<section> 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
<article> 文章区域
<source> 为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值
<dialog> 定义对话框，比如提示框
<embed> 定义嵌入的内容，比如插件。
<mark> 定义带有记号的文本。请在需要突出显示文本时使用 <em> 标签。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。类似进度条
<progress> 定义运行中的进度（进程）。
# input 增加新属性
| 类型 | 描述 |
|---|---|
| color | 定义拾色器。 |
| date | 定义日期字段（带有 calendar 控件） |
| datetime | 定义日期字段（带有 calendar 和 time 控件） |
| datetime-local | 定义日期字段（带有 calendar 和 time 控件） |
| month | 定义日期字段的月（带有 calendar 控件） |
| week | 定义日期字段的周（带有 calendar 控件） |
| time | 定义日期字段的时、分、秒（带有 time 控件） |
| 定义用于 e-mail 地址的文本字段 | |
| number | 定义带有 spinner 控件的数字字段 |
| range | 定义带有 slider 控件的数字字段 |
| search | 定义用于搜索的文本字段 |
| tel | 定义用于电话号码的文本字段 |
| url | 定义用于 URL 的文本字段 |
# HTML5 Web Storage 提供了两种在客户端存储数据的新方法
LocalStorage - 没有时间限制的数据存储
用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
同源可以读取并修改 localStorage 数据。
SessionStorage - 针对一个 session 的数据存储
用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问，并且当会话结束后数据也随之销毁。
因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。
一般 LocalStorage 和 SessionStorage 都可以保存 5MB 的信息，但不同的浏览器具体存储的大小不一样
# Web Worker
阮一峰-Web Worker 使用教程 (opens new window)
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
Web Worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 Web Worker 在后台运行。
Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。
这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。
注意点
同源限制 ：分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
DOM 限制 ：Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用 document、window、parent 这些对象。但是，Worker 线程可以 navigator 对象和 location 对象。
通信联系 ：Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。
脚本限制 ：Worker 线程不能执行 alert()方法和 confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
文件限制 ：Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。
# Server-Sent Events - 单向消息传递
阮一峰-Server-Sent Events 教程 (opens new window)
服务器向浏览器推送信息，除了 WebSocket，还有一种方法：Server-Sent Events（以下简称 SSE）。
Server-Sent Events 指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。
通过服务器发送事件，更新能够自动到达。
例：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。
# SSE 的本质
严格地说，HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。
也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流，视频播放就是这样的例子。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。
SSE 就是利用这种机制，使用流信息向浏览器推送信息。它基于 HTTP 协议，目前除了 IE/Edge，其他浏览器都支持。
# SSE 的特点
SSE 与 WebSocket 作用相似，都是建立浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息。
总体来说，WebSocket 更强大和灵活。因为它是全双工通道，可以双向通信；SSE 是单向通道，只能服务器向浏览器发送，因为流信息本质上就是下载。如果浏览器向服务器发送信息，就变成了另一次 HTTP 请求。
但是，SSE 也有自己的优点：
- SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。
- SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。
- SSE 默认支持断线重连，WebSocket 需要自己实现。
- SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据。
- SSE 支持自定义发送的消息类型。
因此，两者各有特点，适合不同的场合。
# Canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
# 音频和视频
HTML5 DOM 为 <audio> 和 <video>元素提供了方法、属性和事件。
这些方法、属性和事件允许使用 JavaScript 来操作 <audio> 和 <video> 元素。
# 地理定位
HTML5 Geolocation API 允许我们对喜欢的网站共享我们的位置。JavaScript 可以捕获到纬度和经度，还可以发送给后端服务器，然后做一些位置感知的事情，比如查找本地企业或者在地图上显示我们的位置。
# 拖放
创建一个可拖拽对象
如果想要拖动某个元素，需要设置元素的 draggable 属性为 true。
给 dragstart 设置一个事件监听器存储拖拽数据。
事件监听器 dragstart 会设置允许的效果（copy，move，link 或者是组合形式的）
放置对象
dragenter 事件，用来确定放置目标是否接受放置。如果放置被接受，那么这个事件必须取消。
dragover 事件，用来确定给用户显示怎样的反馈信息。如果这个事件被取消，反馈信息（通常就是光标）就会基于 dropEffect 属性的值更新。
最后是 drop 事件，允许执行真是的放置。