hidden 属性不是 display:none 的语法糖，而是 html5 布尔属性，语义表示内容暂不适用当前上下文，不影响 dom 结构、js 可访问性及子元素显隐控制，且支持 css 覆盖和无障碍友好。
hidden 属性不是 display:none 的语法糖
hidden 是 HTML5 原生布尔属性，语义上表示“此内容当前不适用于当前上下文”；display: none 是纯视觉控制手段，不带任何语义。浏览器对两者的处理路径不同：hidden 会映射为 aria-hidden="true" 并参与无障碍树构建（可被覆盖），而 display: none 直接跳过渲染树和辅助技术暴露。
常见误判：以为加了 hidden 就等于写了 style="display:none"——其实前者 DOM 仍完整、JS 可查、事件监听器未销毁；后者连 getBoundingClientRect() 都返回 0 或 NaN，且子元素一并消失。
display:none 会导致子元素强制不可见，hidden 不会
父元素设 display: none，无论子元素怎么写 display: block 都无效，浏览器根本不会计算其布局；而父元素设 hidden，子元素仍可显式声明 hidden 为 false 或用 JS 移除该属性来单独显示。
这在动态表单或条件渲染中很关键：
- 用
display: none隐藏整个<fieldset></fieldset>，里面的<input>就无法通过tabindex聚焦，也无法响应focus事件 - 用
hidden则保留下层交互能力，只要 JS 主动移除该属性，焦点、验证、提交逻辑都自然恢复
hidden 支持 CSS 覆盖，display:none 不行
[hidden] { display: block; } 这类样式是合法且有效的，意味着你可以用 CSS 主动“驳回”语义隐藏；但你没法用 CSS 把一个写死的 style="display:none" 覆盖成可见——除非内联样式被更高级别的 !important 打破，而这本身违背可维护性原则。
实际影响包括：
- 响应式场景下，移动端用
hidden隐藏导航，PC 端用媒体查询取消隐藏，比反复切换 class 更清晰 - 组件库封装时，用
hidden作为默认隐藏开关，比硬编码display值更容易被下游覆盖 -
display: none在动画中完全失效，而[hidden]可配合transition控制 opacity 或 transform
可访问性和 SEO 行为差异极大
搜索引擎和屏幕阅读器对 hidden 和 display: none 的解析策略不同：前者明确表示“暂不适用”，内容仍可能被索引（取决于上下文）；后者直接视为不存在，内容既不朗读也不收录。
容易踩的坑：
- 用
display: none隐藏错误提示，却忘了同步清理aria-invalid="true"，导致读屏器报错但找不到文本 - 用
hidden隐藏广告占位符，但没配aria-hidden="false"，结果部分旧版读屏器仍跳过 - 服务端渲染时，若只靠 JS 动态加
display: none，首屏可能闪出不该出现的内容；而hidden是 HTML 层级的，服务端可直接输出
最常被忽略的一点：hidden 是布尔属性，没有值；写成 hidden="false" 不会生效，必须用 removeAttribute('hidden') 或 hidden = false（注意 DOM 属性与 JS 属性的映射差异）。
