hidden是HTML5语义化布尔属性，声明内容暂不适用当前上下文；它排除元素于渲染树外、保留DOM与JS可访问性、支持CSS覆盖及无障碍映射，而display:none仅为纯视觉控制且彻底移除渲染与可访问性。
hidden 属性确实能实现原生的视觉隐藏，但它不是 CSS 的 display: none 替代品，而是语义化控制——浏览器会跳过渲染该元素，且默认不占用布局空间，同时对辅助技术（如屏幕阅读器）也生效。
为什么 hidden 不等于 display: none
两者都会让元素不可见，但行为差异明显：
-
hidden是 HTML 布尔属性，由浏览器原生处理：元素被完全排除在渲染树之外，不参与布局、不响应事件、不被焦点捕获、不被屏幕阅读器朗读 -
display: none是 CSS 规则，仅影响呈现层；若 JS 动态移除该样式，元素立即重绘；而hidden被移除时，浏览器需重建子树，开销略大 - 当元素有内联
style="display: block"时，hidden仍优先生效（HTML 属性层级高于内联样式）
hidden 在 JS 中的正确开关方式
不能用 element.style.hidden = true —— 因为 hidden 不是 CSS 属性，而是 HTML 元素的布尔属性，必须通过 DOM API 操作：
- 显示元素：
element.removeAttribute('hidden') - 隐藏元素：
element.setAttribute('hidden', '')或更推荐的element.hidden = true（注意：这是元素的 JS 属性，和 HTMLhidden属性同步，但写法不同） - 检查状态：
element.hasAttribute('hidden')或element.hidden（返回布尔值，可读可写）
⚠️ 常见错误：写成 element.hidden = 'true' 或 element.setAttribute('hidden', 'true') —— 实际上只要存在该属性（无论值是什么），就触发隐藏。
哪些场景适合用 hidden，哪些不适合
适用：
- 服务端预渲染中临时屏蔽某区块（如未登录时不显示用户菜单）
- 表单步骤切换，当前非活跃步骤的
fieldset或section标记为hidden - 需要确保元素彻底“不存在于可访问性树”中的情况（比如占位符、调试用提示）
慎用：
- 动画过渡：无法对
hidden做 CSS 过渡，它只有开/关两种状态 - 频繁显隐：每切换一次都触发重排（reflow），比切换
visibility或opacity性能差 - 依赖 CSS 选择器匹配的样式（如
[hidden] { opacity: 0.5; }）——虽然合法，但语义冲突，不建议覆盖默认行为
兼容性与降级要点
现代浏览器（Chrome 23+、Firefox 22+、Safari 6.1+、Edge 12+）均支持 hidden。IE10–11 支持但有 bug：若父元素已 hidden，子元素设 hidden=false 可能不生效。
降级只需一行 CSS：
*[hidden] { display: none !important; }
注意：不要用 [hidden="true"]，因为布尔属性无值也可存在；也不要加 !important 以外的规则，避免干扰其他样式逻辑。
真正容易被忽略的是：当你用 element.hidden = false 想“恢复显示”，却忘了该元素可能还挂着 display: none 内联样式或 class —— 此时 hidden 属性虽失效，CSS 仍压制着它。
