HTML5常见问题需按五类分别解决：一、旧IE用html5shiv支持语义标签；二、媒体标签需多格式source+正确MIME；三、表单验证需规范type属性和submit触发；四、Canvas需适配dpr缩放；五、localStorage需try-catch降级。
如果您在开发或运行 HTML5 页面时遇到兼容性、媒体播放、表单验证或语义标签渲染异常等问题，可能是由于浏览器支持差异、语法错误或资源加载失败导致。以下是解决这些常见问题的具体操作步骤：
一、修复 HTML5 语义标签在旧版 IE 中不被识别的问题
Internet Explorer 8 及更早版本无法原生识别 <article>、<section>、<header> 等 HTML5 新增标签，导致样式丢失或 DOM 操作失效。需通过 JavaScript 动态创建标签并触发渲染。
1、在 <head> 标签内引入 html5shiv 库的 CDN 链接：<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>。
2、确保该 script 标签位于所有 CSS 引入之后、其他 JavaScript 执行之前。
立即学习“前端免费学习笔记（深入）”；
3、验证页面中是否已正确注册标签：在开发者工具控制台执行 document.createElement('article')，返回值不应为 undefined。
二、解决 <video> 或 <audio> 标签在部分浏览器中无法播放的问题
HTML5 媒体元素依赖浏览器对编码格式的支持，MP4（H.264+AAC）、WebM（VP8/VP9+Vorbis/Opus）、Ogg（Theora+Vorbis）三者支持情况各异，单一格式可能导致跨浏览器播放失败。
1、为同一媒体资源提供至少两种格式源文件：<source src="video.mp4" type="video/mp4"></source>。
2、在同一 <video> 标签内追加第二来源：<source src="video.webm" type="video/webm"></source>。
3、检查服务器是否正确配置 MIME 类型：MP4 文件需返回 video/mp4，WebM 文件需返回 video/webm，可通过网络面板查看响应头 Content-Type 字段确认。
三、修正表单输入验证在 Safari 或旧版 Chrome 中未触发的问题
部分浏览器对 required、pattern、min/max 等属性的原生验证行为存在延迟或禁用状态，尤其在未设置 type 属性或未绑定 submit 事件时验证逻辑不生效。
在 Windows 上执行终端命令，或对比 Windows 与 Linux 的 Shell 语法时使用。建议先检测当前 Shell 是 PowerShell 还是 cmd.exe，再给出相应命令……
1、为 input 元素显式声明符合语义的 type 值，例如邮箱应使用 type="email"，数字输入应使用 type="number"。
2、确保表单提交由原生 <button type="submit"> 或 <input type="submit"> 触发，避免仅用 onclick 绑定 JS 提交。
3、在提交前手动调用 checkValidity() 方法并阻止默认行为：if (!form.checkValidity()) { event.preventDefault(); }。
四、处理 Canvas 绘图在高 DPI 设备上模糊的问题
Canvas 默认以 CSS 像素为单位渲染，但在 Retina 或 Windows 高缩放比设备上，物理像素密度更高，导致绘图被拉伸而失真。
1、获取设备像素比：const dpr = window.devicePixelRatio || 1;。
2、将 canvas 的 width/height 属性设为 CSS 尺寸乘以 dpr：canvas.width = canvas.clientWidth * dpr;。
3、通过 CSS 设置 canvas 缩放：canvas.style.transform = `scale(${1 / dpr})`;，并添加 transform-origin: 0 0; 保证对齐。
五、排除 localStorage 在无痕模式下抛出 QuotaExceededError 的故障
Safari 无痕模式及部分 Android 浏览器在隐私浏览状态下会禁用或限制 localStorage 写入权限，直接调用 setItem 可能引发异常且中断脚本执行。
1、封装安全写入函数，使用 try-catch 捕获异常：try { localStorage.setItem(key, value); } catch (e) { /* 处理降级逻辑 */ }。
2、检测是否可用：执行 localStorage.setItem('__test', 'ok'); localStorage.removeItem('__test');，无报错即表示可写。
3、若不可用，切换至内存缓存（如全局对象）或 sessionStorage（部分无痕模式仍允许）作为临时替代。
