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 年无需任何适配
• IndexedDB 2014 年仅 IE10+/Chrome 12+ 实验性支持，2022 年已全平台稳定（但 Safari 仍默认禁用第三方上下文中的 IndexedDB，需用户交互触发）
• 标签 2014 年根本未标准化，2022 年 Chrome/Firefox 已原生支持，Safari 直到 2023 年才跟进 —— 所以你在 2022 年写
  ，必须加 if (!('showModal' in HTMLDialogElement.prototype)) 检测并 fallback
• Web Workers 和 websockets 2014 年已有，但 2022 年才普遍支持 SharedWorker 和 WebSocket binaryType = '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 受益，结构错位反而伤权重

、

这些标签 2014 年就定稿，2022 年所有现代浏览器都识别，但搜索引擎对它们的解析逻辑已升级 —— 不再只看标签名，更看嵌套关系和上下文。

• 错误写法：

  标题

  →

  必须是其最近的

  、

  或 的直接子元素，否则 google 可能忽略其语义

• 在整个页面中只能出现一次，且不能嵌套在
  

  、

  、

  内 —— 2022 年 Lighthouse 会直接报 A11y 错误

• 如果用 cms 输出结构不可控，宁可用 role="banner" 替代
  

  ，避免因 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，才能确认那行代码是不是真的有效。