hidden属性是语义化隐藏元素的原生方式，声明即彻底排除渲染与可访问性；需配合CSS兜底防闪屏，避免混用display:none或条件渲染，适用静态权限控制等场景。
HTML 的 hidden 属性是语义化控制元素“存在即不可见”的原生方式，但它不是万能开关——用错场景或混用 CSS 会导致失效、闪屏、交互丢失甚至可访问性问题。关键在于理解它“声明式隐藏”的本质，而非把它当成 display: none 的快捷写法。
hidden 属性的核心行为
hidden 是布尔属性：只要写在标签上（如 <div hidden>），浏览器就彻底跳过渲染该元素及其所有子节点；它不占布局空间、无法获得焦点、不响应点击事件、屏幕阅读器直接跳过——这些都不是样式效果，而是 DOM 层级的语义排除。
- 设
el.hidden = true等价于添加hidden属性；设el.hidden = false才真正移除该属性并恢复可见性与可访问性 -
hidden="false"无效——属性存在即隐藏，值是什么无关紧要 - 若元素已有
style="display: none"，仅设el.hidden = false不会清除内联样式，需手动清空：el.style.display = "" -
offsetHeight和getBoundingClientRect()对 hidden 元素恒返回0
多步骤表单中避免闪屏的关键操作
服务端直出 HTML 时若某步骤容器初始不可见，直接写 <section id="step2" hidden> 是正确起点，但仅靠 HTML 不够——浏览器先解析 HTML 渲染，再执行 JS 设置 el.hidden = false，用户会看到“闪一下”（FOVC）。必须用 CSS 提前兜底：
- 在全局 CSS 中定义：
[hidden] { display: none !important; }，确保样式层优先生效 - 所有步骤容器必须同级存在于初始 DOM 中（不能靠 JS 动态插入），否则 hydration 后状态易错乱
- 禁止混用
<input type="hidden">：那是表单数据载体，和界面显隐无关 - JS 控制显隐时只用
el.hidden = true/false，别用el.setAttribute('hidden', '')或el.removeAttribute('hidden')，前者冗余，后者在 SSR 场景下可能误判
什么时候该用 hidden，什么时候该用 display
hidden 适合静态声明、无需后续交互的隐藏场景；display: none 更适合动态切换、需保留 JS 可控性的场合。
立即学习“前端免费学习笔记（深入）”；
- 用
hidden：权限控制模块（服务端根据角色输出hidden）、表单中“当前条件不适用”的字段组、SSR 页面中预置但暂不展示的内容块 - 用
display: none：下拉菜单、模态框、点击切换的折叠面板——这些需要频繁 JS 控制、可能绑定事件、或需动画过渡 - 绝对不要在 Vue/React 条件渲染（如
v-if或{show && <...>}</...>）里叠加hidden，语义冲突会导致状态不同步
按钮点击控制显隐的推荐写法
button 本身没有持久状态，纯 CSS 无法可靠实现点击切换。必须用 JavaScript，且优先通过 class 控制，而非直接操作 style.display：
- 定义 CSS 类：
.is-hidden { display: none; } - JS 中用
target.classList.toggle("is-hidden")实现点击切换 - 若需单向显示，用
.add("is-hidden")或.remove("is-hidden") - 避免给 button 加
tabindex试图用:focus模拟状态——不可靠且破坏用户体验
