hidden是语义开关，display是渲染指令，二者不等价且不可互替；混用会导致首屏闪现、表单漏提交、读屏报错、seo丢内容等问题。

hidden 是语义开关，display 是渲染指令；两者不等价，也不能互相替代。 用错一个，轻则首屏闪现、表单漏提交，重则读屏器报错、SEO 丢内容。

hidden 属性不是 display: none 的快捷写法

浏览器默认靠 [hidden] { display: none; } 实现隐藏，但这规则来自 UA 样式表，不是 HTML 解析器内置行为。这意味着：

• 没加这条 CSS 时，<div hidden> 可能完全不生效（比如 Ant Design 把 <code>div 设成 inline-flex）
• 写了 <div hidden style="display: block">，元素照样不可见 —— <code>hidden 会强制覆盖所有 display 值
• 第三方 reset.css 或框架样式可能悄悄改掉 div、span 等默认 display，导致 hidden 失效

JS 切换 hidden 时最常卡住的坑

el.hidden = false 不等于“让元素显示出来”，它只移除属性，不管内联样式：


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• 如果之前执行过 el.style.display = 'none'，再设 el.hidden = false，元素依然不可见
• 正确做法是先清空内联样式：el.style.display = ''，再设 el.hidden = false
• el.setAttribute('hidden', 'false') 是错误写法 —— 布尔属性有值即 true，hidden="false" 和 hidden 效果一样
• getBoundingClientRect() 对 hidden 元素返回全零对象，但 DOM 节点仍在，querySelector、innerHTML 都能正常访问

display: none 会影响子元素和表单行为

display: none 是渲染树层面的剔除，而 hidden 是语义层开关：

• 父元素设 display: none，子元素无论怎么写 display: block 都无效；但父元素设 hidden，子元素可单独设 el.hidden = false 恢复显示
• display: none 的 <input> 不参与表单提交、checkValidity() 返回 true（被跳过）；hidden 的 <input> 仍保留在表单数据流中
• display: none 无法做 transition，[hidden] 却可以配合 opacity 或 transform 实现渐隐动画
• 服务端渲染时，hidden 在 HTML 解析阶段就生效，避免首帧闪现；display: none 若靠 JS 注入，存在渲染间隙

真正麻烦的不是选哪个，而是混用：比如用 hidden 控制初始状态，又用 JS 改 style.display 切换，结果 hidden 被忽略、样式残留、焦点丢失。这类问题在折叠面板、多步骤表单、响应式导航里高频出现，且调试时很难一眼看出根源。