HTML5 新增大量原生API摆脱插件依赖实现前端多媒体、绘图、定位、本地数据存储等能力是现代前端开发的基础。1. 音视频标签audio / video原生支持音视频播放无需flash插件兼容性良好audio 音频标签audio srcmusic.mp3 controls autoplay loop muted您的浏览器不支持音频播放/audiovideo 视频标签video srcvideo.mp4 controls width600 poster封面图.jpg浏览器不支持视频播放/video通用核心属性controls显示控制栏、autoplay自动播放需搭配muted静音、loop循环播放、muted静音、preload预加载2. Canvas 画布H5 位图绘图技术通过JS脚本绘制图形、文字、动画、游戏、数据可视化图表像素级渲染。核心特点基于像素、渲染快、适合动态图形、位图放大失真canvas idcanvas width500 height300/canvas script const canvas document.getElementById(canvas); const ctx canvas.getContext(2d); // 获取2D绘图上下文 ctx.fillStyle #1677ff; // 设置填充色 ctx.fillRect(50,50,100,100); // 绘制矩形 /script3. 地理定位 Geolocation原生JS API获取用户设备地理位置经纬度需用户授权、HTTPS环境localhost本地可调试if(navigator.geolocation){ navigator.geolocation.getCurrentPosition( (res) { // 获取经纬度 const lat res.coords.latitude; const lng res.coords.longitude; console.log(当前位置,lat,lng); }, (err) console.log(定位失败,err) ) }4. 本地存储localStorage / sessionStorage替代cookie的前端本地存储方案容量更大、操作更简单、无需后端参与核心区别localStorage永久存储手动清除才会失效跨标签页共享数据sessionStorage会话存储页面关闭自动清除仅当前标签页生效常用API两者通用// 存储数据 localStorage.setItem(name,前端博客); // 获取数据 localStorage.getItem(name); // 删除单个数据 localStorage.removeItem(name); // 清空所有数据 localStorage.clear();注意仅支持字符串存储对象/数组需通过 JSON.stringify / JSON.parse 转换