HTML5 2014年成为W3C推荐标准，但2022年浏览器支持仍存差异：基础特性如Canvas已稳定，IndexedDB、dialog等需兼容处理，表单控件和语义标签须注意实现细节与上下文，AppCache已废弃，Service Worker成离线唯一方案。
HTML5 2014正式版 vs. 2022年实际支持现状：别把“标准发布”当“浏览器已就绪”
HTML5 在 2014 年 10 月由 W3C 发布为**推荐标准（REC）**，但这不等于所有特性当天就在 Chrome、Firefox、Safari 里能用。2022 年起，主流浏览器对 HTML5 的支持已高度成熟，但关键差异不在“有没有”，而在“稳不稳定”“要不要 polyfill”。
-
Geolocation、Canvas、SVG这三类在 2014 年已稳定，2022 年无需任何适配 -
IndexedDB2014 年仅 IE10+/Chrome 12+ 实验性支持，2022 年已全平台稳定（但 Safari 仍默认禁用第三方上下文中的 IndexedDB，需用户交互触发） -
<dialog></dialog>标签 2014 年根本未标准化，2022 年 Chrome/Firefox 已原生支持，Safari 直到 2023 年才跟进 —— 所以你在 2022 年写<dialog></dialog>，必须加if (!('showModal' in HTMLDialogElement.prototype))检测并 fallback -
Web Workers和WebSockets2014 年已有，但 2022 年才普遍支持SharedWorker和 WebSocketbinaryType = 'arraybuffer'等进阶能力
表单控件：type="date" 这类“看起来很美”的特性，其实最坑
2014 年规范写了 input type="date"，但 2022 年你在 iOS Safari 上点它，弹出的是原生 picker；在旧版 Android WebView 里可能直接退化成 text 输入框，且无校验逻辑。这不是 bug，是规范允许的“优雅降级”。
- 永远不要依赖
type="email"或type="url"做服务端校验 —— 它们只提供基础前端提示，且各浏览器正则不一致（比如 Safari 允许user@domain，Chrome 要求@domain.tld） -
required属性 2014 年就有，但 2022 年仍存在兼容陷阱：iOS Safari 在form.novalidate下会忽略它，而 Chrome 不会 - 想统一体验？别只靠原生控件。用
inputmode="numeric"+pattern="[0-9]*"组合，比单纯type="number"更可控（后者在 iOS 上会唤出带小数点的键盘，但业务只要整数）
语义化标签：用了不等于 SEO 受益，结构错位反而伤权重
<header></header>、<main></main>、<article></article> 这些标签 2014 年就定稿，2022 年所有现代浏览器都识别，但搜索引擎对它们的解析逻辑已升级 —— 不再只看标签名，更看嵌套关系和上下文。
- 错误写法：
<div><header><h1>标题</h1></header></div>→<header></header>必须是其最近的<section></section>、<article></article>或的直接子元素，否则 Google 可能忽略其语义 -
<main></main>在整个页面中只能出现一次，且不能嵌套在<article></article>、<aside></aside>、<footer></footer>内 —— 2022 年 Lighthouse 会直接报 A11y 错误 - 如果用 CMS 输出结构不可控，宁可用
role="banner"替代<header></header>，避免因 DOM 结构错乱导致语义失效
离线与存储：Application Cache 已死，Service Worker 是唯一路径
2014 版 HTML5 正式包含 applicationCache（AppCache），但 2022 年所有主流浏览器均已弃用并移除支持。如果你还在维护 2014 年写的 manifest 文件，页面大概率已无法离线加载。
立即学习“前端免费学习笔记（深入）”；
- AppCache 的缓存策略是“全有或全无”，一个资源失败，整个缓存失败；Service Worker 则可精细控制每个请求的 fetch/strategy/cacheKey
- 迁移时最常漏掉的一步：注册 SW 后必须手动调用
self.skipWaiting()和clients.claim()，否则旧页面不会接管新缓存 - 注意兼容底线：IE 完全不支持 Service Worker，若需兼容 IE，必须保留传统 CDN 静态资源路径作为 fallback，不能只靠 SW 缓存
真正决定 HTML5 特性是否可用的，从来不是“W3C 是否发布”，而是“你目标用户的浏览器版本能否稳定执行该 API”。查 CanIUse 数据只是起点，真正在 iOS 15.6 的微信内置浏览器里跑一遍 localStorage.setItem 和 indexedDB.open，才能确认那行代码是不是真的有效。
