hidden是语义开关，display是渲染指令，二者不等价且不可互替；混用会导致首屏闪现、表单漏提交、读屏报错、SEO丢内容等问题。
hidden 是语义开关，display 是渲染指令；两者不等价，也不能互相替代。 用错一个，轻则首屏闪现、表单漏提交，重则读屏器报错、SEO 丢内容。
hidden 属性不是 display: none 的快捷写法
浏览器默认靠 [hidden] { display: none; } 实现隐藏，但这规则来自 UA 样式表，不是 HTML 解析器内置行为。这意味着：
- 没加这条 CSS 时，
<div hidden>可能完全不生效（比如 Ant Design 把div设成inline-flex） - 写了
<div hidden style="display: block">，元素照样不可见 ——hidden会强制覆盖所有display值 - 第三方 reset.css 或框架样式可能悄悄改掉
div、span等默认display，导致hidden失效
JS 切换 hidden 时最常卡住的坑
el.hidden = false 不等于“让元素显示出来”，它只移除属性，不管内联样式：
- 如果之前执行过
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 被忽略、样式残留、焦点丢失。这类问题在折叠面板、多步骤表单、响应式导航里高频出现，且调试时很难一眼看出根源。
