渐进增强与最佳实践
渐进增强的实施顺序：第一层——不写一行 JS，纯 HTML 就能传达全部核心内容（爬虫、读屏器、极老设备都能用）；第二层——CSS 让它好看；第三层——JS 检测到新 API 可用后叠加交互增强。任何一层失败，上一层依然完整可用。与之相对的"优雅降级"先做满配再砍功能，容易出现"砍着砍着忘了基础用户"。
落地清单值得背下来：所有增强前先做特性检测（in 操作符）；JS 交互用事件委托绑定而不是到处内联 onclick；脚本加 defer 避免阻塞解析；图片加 width/height 防布局偏移、非首屏加懒加载；外链 rel="noopener"；表单前端验证之外服务端必须复核；finally——在真实设备与键盘环境下测试，而不是只在开发机鼠标点点。
HTML5 的 API 体系庞大，本课的目标是建立"知道有什么、去哪查"的地图：具体参数和最新兼容性永远以 MDN 和 caniuse 为准，理解原理比背 API 更重要。
本节要点三层递进：HTML 保内容 → CSS 保观感 → JS 检测后增强；核心习惯 = 特性检测 + defer 脚本 + 防布局偏移 + 服务端复核；API 细节查 MDN，兼容性查 caniuse。
代码
渐进增强实施清单（自检用）：
【第一层：内容可达】
□ 纯 HTML 状态下，核心信息完整可读（关掉 JS 检查一次）
□ 语义标签齐全：main 唯一、标题不跳级、图片有 alt
【第二层：样式增强】
□ 图片写 width/height，防止加载时页面跳动
□ 非首屏图片 loading="lazy"
【第三层：JS 增强】
□ 每个新 API 使用前先特性检测：
if ('geolocation' in navigator) { ... } else { 降级方案 }
□ 脚本加 defer，或放在 body 末尾
□ 外部链接带 rel="noopener"
□ 前端验证只是体验，服务端必须再验证
【工具站】
API 文档 → MDN (developer.mozilla.org)
兼容性 → caniuse.com📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读