HTML5提供多种JavaScript API实现网页功能扩展。1. Geolocation API获取用户位置；2. LocalStorage和SessionStorage用于本地数据存储；3. 媒体API控制音视频播放；4. FileReader读取本地文件；5. Canvas进行图形绘制；6. Service Worker支持离线应用；7. 拖放API实现元素拖拽。这些接口提升Web交互能力，需注意兼容性与错误处理。
HTML5 本身并不是一个可以“调用”的 API，而是一套前端技术标准，包含了新的标签、属性以及一系列 JavaScript API，用于增强网页功能。我们通常所说的“HTML5 API”是指基于 HTML5 标准提供的浏览器接口，可以通过 JavaScript 直接调用，实现丰富的交互和设备能力访问。
1. 常见的 HTML5 API 及使用方法
以下是一些常用的 HTML5 API 接口及其基本使用方式：
地理位置（Geolocation API）
获取用户的地理位置信息，适用于地图、定位服务等场景。
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(`纬度: ${lat}, 经度: ${lng}`);
},
function(error) {
console.error("获取位置失败:", error.message);
}
);
} else {
console.log("浏览器不支持地理定位");
}
本地存储（LocalStorage & SessionStorage）
在客户端保存数据，LocalStorage 永久保存（除非手动清除），SessionStorage 仅在会话期间有效。
立即学习“前端免费学习笔记（深入）”；
// 存储数据
localStorage.setItem("username", "张三");
sessionStorage.setItem("tempData", "临时信息");
<p>// 读取数据
const name = localStorage.getItem("username");
const temp = sessionStorage.getItem("tempData");</p><p>// 删除数据
localStorage.removeItem("username");</p>媒体 API（Audio/Video 控制）
通过 JavaScript 控制音频和视频播放。
const video = document.getElementById("myVideo");
<p>video.play(); // 播放
video.pause(); // 暂停
video.volume = 0.5; // 音量设为50%</p><p>// 监听播放事件
video.addEventListener("play", () => {
console.log("视频开始播放");
});</p>文件 API 与 FileReader
允许用户选择本地文件并在前端读取内容，常用于图片预览、文件上传前处理。
document.getElementById("fileInput").addEventListener("change", function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
document.getElementById("preview").src = event.target.result;
};
reader.readAsDataURL(file); // 读取为 Data URL
}
});
Canvas 图形绘制
使用 Canvas 元素进行绘图、动画或图像处理。
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
<p>ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100); // 绘制红色矩形</p><p>ctx.beginPath();
ctx.arc(150, 60, 50, 0, 2 * Math.PI);
ctx.stroke(); // 绘制圆形轮廓</p>离线应用与 Service Worker（PWA 基础）
实现网页离线访问，是构建 PWA（渐进式 Web 应用）的关键。
// 注册 Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW 注册成功', reg))
.catch(err => console.log('注册失败', err));
}
在 sw.js 中可定义缓存策略、离线资源等。
拖放 API（Drag and Drop）
实现元素拖拽功能。
element.addEventListener("dragstart", function(e) {
e.dataTransfer.setData("text/plain", e.target.id);
});
<p>dropZone.addEventListener("drop", function(e) {
e.preventDefault();
const id = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(id));
});</p><p>dropZone.addEventListener("dragover", function(e) {
e.preventDefault(); // 允许放置
});</p>总结
HTML5 提供了大量实用的 API，无需额外库即可实现定位、存储、多媒体控制、文件操作等功能。使用这些 API 时需注意浏览器兼容性，并做好错误处理。基本上就这些核心接口，掌握它们能大幅提升 Web 应用的交互能力和用户体验。
