html本身不实现优雅降级或渐进增强，它只是载体；真正起作用的是语义化标签、dom结构与回退路径的设计——如原生支持焦点、键盘操作和无障碍，而在js失效时完全不可用。
直接说结论：HTML 本身不“实现”优雅降级或渐进增强，它只是承载这两种策略的底层载体；真正起作用的是你如何组织语义化标签、安排 DOM 结构、设计回退路径——而不是靠某个 magic 属性一键开启。
为什么 <button></button> 比 <div onclick> 更适合渐进增强
<p>因为 <code><button></button> 原生支持焦点、空格/回车触发、禁用状态（disabled）、屏幕阅读器朗读，且无需 JS 就能提交表单。而 <div onclick> 在 JS 失效、键盘导航或读屏软件下基本不可用。
<ul><li>JS 被禁用或加载失败时，<code><button></button> 仍可点击（如果包裹在 <form></form> 中还能提交）；<div onclick> 完全失效
<li>用户用 Tab 键导航时，<code><button></button> 自动获得焦点；<div> 需手动加 <code>tabindex="0" 且无默认行为
<div onclick> 为严重问题；<code><button></button> 默认通过
<picture></picture> 和 <video></video> 的 fallback 写法容易漏掉什么
很多人只写 <source></source> 标签，却忘了最外层的 fallback 内容——这正是优雅降级的关键落点。
-
<picture></picture>必须包含一个<img>作为最后兜底，否则不支持<picture></picture>的浏览器（如 IE11）会空白 -
<video></video>内部必须写纯文本提示或@#@#@#@#@#@#@#@#@#@0，不能只依赖<source></source> -
alt属性不是可选的“补充”，而是图片加载失败或禁用图像时的唯一内容替代——尤其对语义化和 SEO 至关重要
用 <details></details> + <summary></summary> 实现折叠面板时，JS 不该做什么
这个原生组件天生支持渐进增强：无 JS 时展开全文，有 JS 时可添加动画或状态管理。但常见错误是用 JS 完全覆盖默认行为。
- 不要用
event.preventDefault()拦截<summary></summary>的 click——这会让禁用 JS 的用户无法展开 - 不要用 JS 控制
open属性来开关状态——应仅监听toggle事件做副作用（如打点、懒加载），而非接管逻辑 - 若需兼容 IE（不支持
<details></details>），应在 JS 中检测：if (!('open' in document.createElement('details')))，再动态插入 polyfill 或降级为<div class="accordion"> 结构 <h3>Modernizr 检测后，class 名该加在哪儿</h3> <p>Modernizr 把检测结果写入 <code>元素的 class，比如no-flexbox或cssgrid。但很多人误加在或局部容器上。- 必须加在
上——这是 Modernizr 的默认行为，也是 CSS 选择器能跨层级生效的前提 - 写 CSS 时用
html.no-flexbox .layout { display: block; }，而不是.no-flexbox .layout（后者依赖 JS 插入 class 到错误位置） - 如果项目不用 Modernizr，可用
@supports替代，但注意 IE 完全不支持@supports，所以它本身就需要 fallback
最容易被忽略的点是：渐进增强不是“先写 HTML，再加 CSS，最后塞 JS”这种线性流程；而是每层都得独立验证——删掉 CSS 文件，页面是否仍可读？关掉 JS，核心操作是否仍可达？这才是降级和增强真正落地的标尺。
- 必须加在
