HTML5常见问题需按五类分别解决：一、旧IE用html5shiv支持语义标签；二、媒体标签需多格式source+正确MIME；三、表单验证需规范type属性和submit触发；四、Canvas需适配dpr缩放；五、localStorage需try-catch降级。
如果您在开发或运行 HTML5 页面时遇到兼容性、媒体播放、表单验证或语义标签渲染异常等问题，可能是由于浏览器支持差异、语法错误或资源加载失败导致。以下是解决这些常见问题的具体操作步骤：
一、修复 HTML5 语义标签在旧版 IE 中不被识别的问题
Internet Explorer 8 及更早版本无法原生识别
1、在
标签内引入 html5shiv 库的 CDN 链接：。2、确保该 script 标签位于所有 CSS 引入之后、其他 JavaScript 执行之前。
立即学习“前端免费学习笔记（深入）”；
3、验证页面中是否已正确注册标签：在开发者工具控制台执行 document.createElement('article')，返回值不应为 undefined。
二、解决
HTML5 媒体元素依赖浏览器对编码格式的支持，MP4（H.264+AAC）、WebM（VP8/VP9+Vorbis/Opus）、Ogg（Theora+Vorbis）三者支持情况各异，单一格式可能导致跨浏览器播放失败。
1、为同一媒体资源提供至少两种格式源文件：
2、在同一
3、检查服务器是否正确配置 MIME 类型：MP4 文件需返回 video/mp4，WebM 文件需返回 video/webm，可通过网络面板查看响应头 Content-Type 字段确认。
三、修正表单输入验证在 Safari 或旧版 Chrome 中未触发的问题
部分浏览器对 required、pattern、min/max 等属性的原生验证行为存在延迟或禁用状态，尤其在未设置 type 属性或未绑定 submit 事件时验证逻辑不生效。
1、为 input 元素显式声明符合语义的 type 值，例如邮箱应使用 type="email"，数字输入应使用 type="number"。
Delphi 7应用编程150例 CHM全书内容下载，全书主要通过150个实例，全面、深入地介绍了用Delphi 7开发应用程序的常用方法和技巧，主要讲解了用Delphi 7进行界面效果处理、图像处理、图形与多媒体开发、系统功能控制、文件处理、网络与数据库开发，以及组件应用等内容。这些实例简单实用、典型性强、功能突出，很多实例使用的技术稍加扩展可以解决同类问题。使用本书最好的方法是通过学习掌握实例中的技术或技巧，然后使用这些技术尝试实现更复杂的功能并应用到更多方面。本书主要针对具有一定Delphi基础知识
2、确保表单提交由原生
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（部分无痕模式仍允许）作为临时替代。
