hidden属性不能替代display:none，因为前者是语义声明（内容当前无关），后者是纯视觉指令；hidden会使表单元素彻底退出提交与焦点流，而display:none仅隐藏视觉但保留dom和表单结构，误用将导致校验错乱、焦点卡死及读屏矛盾。
hidden 属性为什么不能替代 display: none
因为 hidden 是语义声明，不是样式开关。它告诉浏览器“这内容当前无关”，而 display: none 只是视觉指令。两者效果相似，但影响不同：加了 hidden 的 <input type="text"> 会彻底从表单提交中消失（FormData 里没有，form.elements 里查不到），而 display: none 下的同个输入框仍存在于 DOM 和表单结构中——只是看不见。误用会导致校验逻辑错乱、键盘焦点卡死、读屏播报矛盾。
哪些隐藏方式会让键盘用户“卡焦点”
visibility: hidden 和没配 pointer-events: none 的 opacity: 0 最危险。前者元素仍占布局、仍可被 Tab 键聚焦，但光标不可见；后者默认仍响应点击和 focus，用户按到空白处却无反馈。常见现象是 Tab 到某个位置后“焦点丢了”，实际是停在了一个 visibility: hidden 的按钮上。真正安全的视觉隐藏组合是：opacity: 0 + pointer-events: none + visibility: hidden（三者缺一不可）。
想隐藏文字但让读屏能读到，该用什么
用 .sr-only 类，别用 hidden 或 display: none。它的典型实现是：position: absolute; left: -9999px; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;。这样文字对视觉用户不可见，但屏幕阅读器照读不误。常见误用是给图标按钮的辅助文本加 display: none，结果读屏完全跳过“关闭”“删除”这类关键动作提示。注意：如果用了 .sr-only，就别再加 aria-hidden="true"，否则语义冲突。
服务端渲染时 hidden 元素闪现怎么办
这是典型的 “Flash of Visible Content”（FOVC）。HTML 直出时写了 <div hidden>，但 JS hydration 完成前浏览器已渲染该元素，导致用户先看到再消失。解决方法只有一条硬规则：<code>[hidden] { display: none !important; } 必须写在 CSS 入口文件最前面，确保样式层优先生效。别指望 JS 后续执行 el.hidden = true 来补救——它发生得太晚。若该元素本该初始可见，就根本别用 hidden，改用 class 控制显隐。
最容易被忽略的是：hidden 不支持动画，也不该用来做过渡效果。需要淡入、滑动展开时，必须用 CSS 类配合 opacity 或 max-height，把 hidden 当作最终开关，而不是过程控制。
