H5实现功能
H5（HTML5）作为现代网页开发的核心技术，能够实现丰富的交互功能和跨平台兼容性。以下是常见的H5功能实现方法及示例：
响应式布局
使用CSS3的媒体查询（Media Queries）适配不同设备屏幕尺寸。例如：
@media (max-width: 768px) {
.container { width: 100%; }
}本地存储
通过localStorage或sessionStorage实现客户端数据持久化：
localStorage.setItem('key', 'value');
let data = localStorage.getItem('key');地理定位
调用Geolocation API获取用户位置：
navigator.geolocation.getCurrentPosition(
position => console.log(position.coords),
error => console.error(error)
);音视频播放
原生支持<audio>和<video>标签：
<video controls>
<source src="video.mp4" type="video/mp4">
</video>Canvas绘图
使用Canvas API实现动态图形绘制：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);Web Workers
多线程处理避免主线程阻塞：
// main.js
const worker = new Worker('worker.js');
worker.postMessage(data);
// worker.js
onmessage = function(e) {
postMessage(e.data * 2);
};拖放API
实现元素拖拽功能：
<div draggable="true" ondragstart="event.dataTransfer.setData('text', event.target.id)"></div>
<div ondragover="event.preventDefault()" ondrop="dropHandler(event)"></div>WebSocket通信
建立实时双向通信：
const socket = new WebSocket('ws://example.com');
socket.onmessage = event => console.log(event.data);表单增强
新增输入类型和验证属性：
<input type="email" required pattern=".+@.+\..+">
<input type="date">离线应用
通过Manifest文件配置离线缓存：
<html manifest="app.manifest">实现时需注意浏览器兼容性问题，可通过Polyfill或特性检测解决。现代前端框架（如Vue/React）结合H5 API能进一步简化开发流程。
