HTML5（通常被称为 H5）引入了一系列强大的新 API，极大地扩展了浏览器端的能力，使得网页应用（Web App）能够更接近原生应用（Native App）的功能和体验。
以下是 HTML5 中最核心、最常用的新 API 分类整理：
多媒体与图形
<video>和<audio>- 原生支持视频和音频播放，无需依赖 Flash 等第三方插件。
- 提供了丰富的控制接口（播放、暂停、音量、进度条等）。
<canvas>- 提供通过 JavaScript 绘制 2D 图形的 API。
- 常用于游戏开发、数据可视化、图片处理等。
- 后续还有 WebGL（基于 Canvas 的 3D 图形 API）。
<svg>虽然 SVG 在 HTML5 之前就已存在，但 HTML5 规范将其更紧密地集成到 DOM 中,使其成为标准的绘图方式之一。
存储技术
localStorage- 永久存储数据，除非用户手动清除或代码删除,否则数据不会丢失。
- 容量通常为 5MB 或更大。
- 同步 API,主线程操作。
sessionStorage- 临时存储，页面会话结束时（关闭标签页或窗口）数据会被清除。
- 同样为同步 API。
-
IndexedDB- 一个非关系型数据库,用于在客户端存储大量结构化数据。
- 异步 API,适合复杂数据查询和离线应用。
Web Storage- 泛指
localStorage和sessionStorage的统称。
- 泛指
网络与通信
WebSocket- 提供全双工通信通道,服务器和客户端可以实时互相发送数据。
- 比传统的 HTTP 轮询更高效，适用于聊天室、实时游戏、股票行情等场景。
Web Workers- 允许在后台运行 JavaScript 脚本,而不阻塞用户界面。
- 适合处理计算密集型任务（如大数据处理、复杂算法）。
Fetch API- 现代的数据请求方式，基于 Promise，比传统的
XMLHttpRequest更简洁、强大。 - 虽然严格来说是在 HTML5 之后标准化，但已成为现代 Web 开发的标准。
- 现代的数据请求方式，基于 Promise，比传统的
地理位置与传感器
Geolocation API- 获取用户的地理位置信息（经度、纬度、海拔、速度等）。
- 常用于地图应用、本地服务推荐。
DeviceOrientation和DeviceMotion- 获取设备的方向（陀螺仪）和运动（加速度计）信息。
- 常用于游戏、AR 应用或屏幕旋转控制。
拖放与交互
- Drag and Drop API
- 允许用户将元素从一个位置拖放到另一个位置。
- 常用于文件上传、列表排序、看板工具等。
ContentEditable使任何 HTML 元素变为可编辑状态,实现富文本编辑器功能。
表单增强
- 新输入类型
email,url,number,range,date,time,color,search等。- 提供更友好的移动端键盘和输入验证。
- 新属性
placeholder,required,pattern,autofocus,multiple,min/max等。- 减少前端验证代码,提升用户体验。
语义化标签
- 虽然不是“API”，但 HTML5 引入了新的语义化标签，有助于 SEO 和无障碍访问：
<header>,<footer>,<nav>,<article>,<section>,<aside>,<main>等。
其他重要 API
-
History APIpushState(),replaceState(),popstate事件。- 允许在不刷新页面的情况下改变 URL，实现单页应用（SPA）的浏览器前进/后退功能。
Web Storage的storage事件- 当
localStorage或sessionStorage发生变化时触发,可用于跨标签页通信。
- 当
WebRTC支持浏览器之间的实时音视频通信，用于视频会议、直播等。
Service Workers作为代理服务器，拦截网络请求，实现离线缓存、推送通知等功能，是 PWA（渐进式 Web 应用）的核心。
HTML5 的新 API 主要解决了以下几个问题：
- 多媒体原生支持：摆脱对 Flash 的依赖。
- 离线与存储：让 Web 应用能存储数据并离线运行。
- 实时通信：实现低延迟的双向数据交换。
- 性能优化：通过 Web Workers 和 Canvas 提升计算和渲染效率。
- 用户体验提升：通过语义化标签、新表单控件和地理位置等功能，提供更自然、更智能的用户交互。
这些 API 共同推动了 Web 应用向更强大、更丰富、更接近原生应用的方向发展。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/h5%e6%a0%87%e5%87%86%e6%96%b0api%e6%9c%89%e5%93%aa%e4%ba%9b%ef%bc%9fh5%e6%96%b0%e7%89%b9%e6%80%a7%e6%9c%89%e5%93%aa%e4%ba%9b/
