hidden属性是唯一标准且语义正确的隐藏方式，它使元素不渲染、不读取、不聚焦，对屏幕阅读器和搜索引擎明确表示不可见；aria-hidden仅影响辅助技术，display/visibility仅控制视觉呈现。
hidden 属性是唯一标准且语义正确的隐藏方式
用 hidden 属性标记的内容，浏览器默认不渲染、不读取、不聚焦，对屏幕阅读器和搜索引擎都明确表示“此处不可见也不应被处理”。它不是 CSS 技巧，而是 HTML 原生语义开关。
常见错误是只写 style="display: none" 或 class="visually-hidden"，但这只是视觉隐藏，元素仍在 DOM 中活跃，可能被键盘 Tab 到、被屏幕阅读器朗读、被 JS 误操作。
-
hidden是布尔属性：写上即生效，无需赋值（<div hidden> ✅，<code><div hidden="false"> ❌） <li>可被 JS 动态控制：<code>el.hidden = true/el.hidden = false，比切换 class 更直接 - 与 CSS 冲突时，
hidden优先级更高 —— 即使你写了display: block，只要hidden存在，元素仍不渲染 - 永远不要对可交互元素（
<button></button>、<a></a>）单独用aria-hidden="true"，这会造成焦点与语义断裂 -
aria-hidden="true"对搜索引擎、打印样式、CSS 渲染完全无影响 - 如果同时需要视觉隐藏 + 辅助技术隐藏，应组合使用：
hidden（主控） +aria-hidden（冗余兜底，部分旧读屏兼容） - 动画中禁用
display: none：它无法过渡（transition），设了也无效；要用opacity: 0+visibility: hidden组合实现“渐隐后移除” -
visibility: hidden下的<video></video>或<audio></audio>仍会继续播放，display: none则通常暂停（行为因浏览器而异） - 打印样式表里，
display: none的内容一定不出现在打印页，visibility: hidden的可能仍占白位 - 纯功能型隐藏（如条件渲染区块）：用
el.hidden = bool，简单直接 - 带过渡动画的显示/隐藏：先设
el.hidden = false，再加 class 触发动画；收起时先移 class，动画结束后再设el.hidden = true - 服务端渲染页面中，初始状态必须由 HTML 属性决定（
hidden或data-*），不能依赖 JS 初始化后的 class
aria-hidden="true" 只影响辅助技术，不隐藏视觉或 DOM 结构
aria-hidden="true" 不是隐藏内容的手段，它只是告诉屏幕阅读器“忽略这个节点”，但元素依然可见、可聚焦、参与文档流。常被误用为“隐藏方案”，结果导致键盘用户能 Tab 进去、CSS 仍要额外处理显示。
典型使用场景只有两个：一是装饰性图标（如纯图标按钮里的 <svg></svg>），二是模态框开启时给背景加 aria-hidden="true" 防止屏幕阅读器误读。
立即学习“前端免费学习笔记（深入）”；
display: none 和 visibility: hidden 的实际差异远不止“看不看得见”
display: none 让元素彻底退出渲染树：不占空间、不触发重排、子元素全失效；visibility: hidden 保留布局位置，子元素可通过 visibility: visible 单独显形 —— 这点常被忽略，导致意外显示。
性能上，display: none 触发重排（reflow），但现代浏览器优化较好；visibility: hidden 只触发重绘（repaint），开销略小，但几乎感知不到。
用 JS 控制隐藏状态时，优先操作 hidden 属性而非 class
直接改 el.hidden 比切换 el.classList.toggle("is-hidden") 更轻量、更可靠。尤其在 SSR 或 Hydration 场景下，避免因 class 同步延迟导致闪现（FOUC）。
但要注意：某些 UI 库（如 Bootstrap）依赖 class 控制状态，强行改 hidden 可能绕过其内部逻辑，引发事件监听失效或动画中断。
真正难的不是选哪个属性，而是判断“隐藏”到底想达成什么效果：是不让用户看见？不让辅助工具读取？不让搜索引擎索引？还是单纯腾出布局空间？不同目标对应不同机制，混用就会出问题。
