html5兼容性本质是特性可用性差异，现代浏览器基本支持核心特性，旧环境（如ie9–11）需doctype声明、html5shiv、polyfill等补救措施。
HTML 和 HTML5 的兼容性差别，本质不是“能不能打开”，而是“哪些特性能用、哪些会静默失效、哪些需要额外补救”。现代浏览器（Chrome 120+、Firefox 125+、Edge 122+、Safari 17+）对 HTML5 核心特性已基本无感支持；真正的问题集中在旧环境——尤其是 IE9–IE11 和部分国产双内核浏览器的兼容模式下。
DOCTYPE 声明决定渲染模式，不是可有可无的装饰
浏览器看到 才启用标准模式解析 HTML5；若漏写、写错（如 <code>），哪怕只用 <code><header></header> 或 <video></video>，IE9+ 也会退回到怪异模式，导致盒模型错乱、CSS 选择器失效、甚至 document.querySelector 返回 null。
- 必须放在文件第一行，前面不能有任何空格、注释或 BOM 字符
- 大小写不敏感，但统一用小写更稳妥：
也合法 - 旧项目迁移时，先检查服务器是否在响应头里注入了
X-UA-Compatible: IE=EmulateIE7类配置，它会强行覆盖 DOCTYPE
语义标签在 IE8 及以下直接不可识别
<section></section>、<nav></nav>、<main></main> 这些标签在 IE8 及更早版本中不是“样式不好看”，而是根本不会被解析为元素节点：DOM 中查不到，CSS 选不到，JS document.createElement 也不起作用。
- 必须引入
html5shiv（或html5.js）：仅需在中加载一次，它会动态创建这些元素并让 IE 认可它们 - 注意加载时机：必须在所有 CSS 之前，且不能放在条件注释外的普通 script 中（IE9+ 会执行两次）
- 现代项目若已放弃 IE10 以下支持，
html5shiv可删；但若仍需兼容企业内网 IE8 环境，它仍是刚需
原生 API 不可用 ≠ 功能彻底消失，但 polyfill 有边界
localStorage、Geolocation、Canvas.getContext('2d') 在 IE7–IE8 中完全不存在，Modernizr 检测返回 false 是准确的。此时用 polyfill 并非万能：
立即学习“前端免费学习笔记（深入）”；
-
localStorage的 polyfill（如store.js）底层依赖userData行为，仅 IE5.5–IE9 支持，且有 128KB 单域限制 -
Canvas的 polyfill（如excanvas）仅支持 2D，不支持toDataURL、getImageData等关键方法 -
Geolocation无法 polyfill——没有 GPS 或网络定位能力的旧设备，JS 再怎么模拟也无法获取坐标
video/audio 标签的兼容陷阱不止在 IE
看似最简单的 <video controls><source src="a.mp4"></source></video>，实际在 Safari 10.1 以下不支持 MP4 的 H.265 编码，在 Android 4.3 WebView 中可能因 MIME type 未正确返回而卡在 loading 状态，甚至某些国产浏览器把 autoplay 当作广告拦截掉。
- 永远提供至少两种格式：
<source src="a.mp4" type="video/mp4"></source>+<source src="a.webm" type="video/webm"></source> - 用
canPlayType()主动检测，而不是依赖onerror：后者在部分安卓 WebView 中不触发 - 避免在 iOS Safari 上依赖
autoplay——它要求同时满足muted+ 用户手势触发，否则静音也不会播
真正棘手的兼容问题，往往不出现在“新特性用不了”，而出现在“旧特性被新标准悄悄改了行为”：比如 <a href="#"></a> 在 HTML5 中点击不再默认滚动到页面顶部，<form></form> 提交时若没写 action，HTML4 会提交到当前 URL，HTML5 则可能报错或清空数据。这些细节，比加一个 polyfill 更难被发现和测试。
