HTML5常见问题及解决方法：一、IE8以下用html5shiv支持语义化标签；二、移动端媒体需用户手势触发播放，静音自动播放须设muted属性；三、Canvas高DPI模糊需按devicePixelRatio缩放；四、Safari无痕模式localStorage受限，应检测后降级；五、Web Workers错误需主动监听并回传主线程。
如果您在开发或调试HTML5网页时遇到兼容性、语义化、多媒体加载或Canvas渲染异常等问题，可能是由于浏览器支持差异、标签误用或JavaScript执行时机不当所致。以下是针对HTML5常见问题的多种处理与调试方法：
一、修复HTML5语义化标签在旧版IE中不被识别的问题
IE8及更早版本无法原生识别
1、在
中引入html5shiv脚本，确保其位于CSS引用之前。2、使用条件注释仅向IE9以下版本加载该脚本：。
立即学习“前端免费学习笔记（深入）”；
3、若无法使用外部CDN，可将html5shiv.min.js文件本地化，并确认MIME类型为text/javascript。
二、解决
iOS Safari及Android Chrome自2017年起默认禁止无用户交互触发的媒体自动播放，以节省流量和提升性能。必须依赖显式用户手势事件来启动播放。
1、监听一次有效的触摸或点击事件（如document.addEventListener('touchstart', handler, {once: true})）。
2、在该事件回调中调用video.play()或audio.play()，且不带参数或传入{muted: true}。
3、若需静音自动播放，务必设置
三、修正Canvas在高DPI设备上绘制模糊的问题
Retina屏等高分辨率设备下，Canvas的逻辑像素与物理像素比例失配，导致线条和文字边缘发虚。需根据window.devicePixelRatio动态调整canvas的width/height属性及CSS尺寸。
1、获取canvas DOM元素并读取其CSS宽高（如getBoundingClientRect().width）。
2、将canvas元素的width和height属性分别设为CSS宽高乘以devicePixelRatio，并保留小数位。
3、使用ctx.scale(devicePixelRatio, devicePixelRatio)对绘图上下文进行缩放，此后所有坐标值均按CSS像素编写，无需再乘以devicePixelRatio。
四、排查localStorage在Safari无痕模式下抛出QuotaExceededError的异常
Safari在隐私浏览模式中会限制localStorage写入，即使存储量远低于5MB也会立即拒绝，抛出DOMException: QuotaExceededError。需预先检测可用性并降级处理。
1、尝试写入一个测试键值对，如localStorage.setItem('test', 'x')。
2、捕获try-catch中的错误，若为QuotaExceededError或SecurityError，则判定不可用。
3、切换至sessionStorage或内存对象模拟存储，切勿在catch块中继续调用localStorage.removeItem()等操作，可能引发二次异常。
五、定位Web Workers中未捕获的运行时错误
Worker脚本中的语法错误或未捕获异常不会显示在主页面控制台，仅在Worker线程内部静默失败。需主动建立错误监听通道并将信息回传主线程。
1、在Worker脚本顶部添加self.addEventListener('error', e => { self.postMessage({type: 'worker-error', message: e.message, filename: e.filename, lineno: e.lineno}); });。
2、主线程中使用worker.onmessage监听该消息类型，并将内容输出至console.error。
3、确保Worker构造函数路径正确且服务器返回Content-Type为text/javascript，相对路径需相对于包含Worker的HTML文档，而非Worker脚本自身位置。
