hidden 属性比 display:none 更语义化且可访问性更优，它原生支持 DOM 隐藏、焦点排除与屏幕阅读器跳过，无需额外 aria 属性，但不适用于动画或需占位的场景。
hidden 属性比 display:none 更语义化，因为它明确表达“该元素当前不参与文档渲染且不应被辅助技术访问”，而 display:none 仅是视觉隐藏，可能带来可访问性隐患。
hidden 是原生 HTML5 语义属性
hidden 是布尔属性，添加即生效，移除即恢复。浏览器会自动： - 不渲染该元素（视觉上不可见） - 不将其纳入 tab 键焦点流 - 告知屏幕阅读器跳过该元素（无需额外 aria-hidden="true"） - 不影响 CSS 伪类（如 :focus-within 不会因 hidden 元素触发）
与 display:none 的关键区别
display:none 只是样式层面的隐藏： - 元素仍存在于 DOM 中，但被渲染引擎完全忽略 - 若元素内有 或
实际使用建议
✅ 推荐用 hidden 的场景：
- 暂时不需要展示的 UI 区块（如未激活的 Tab 面板、折叠的详情区域）
- 条件性内容（如表单验证失败后显示的错误提示，验证通过后设为 hidden）
- 后备内容（如
❌ 避免用 hidden 的场景： - 动画过渡（hidden 无法配合 opacity/transform 过渡，会立即消失） - 需要保留占位空间的隐藏（hidden 会导致文档流塌陷，类似 display:none；若需占位，改用 visibility:hidden 或 opacity:0）
配合 JavaScript 的正确操作方式
用 JS 控制时，优先操作 hidden 属性而非 class：
- 显示元素：
el.hidden = false或el.removeAttribute('hidden') - 隐藏元素：
el.hidden = true或el.setAttribute('hidden', '') - 检查状态：
if (!el.hidden) { ... }（比 getComputedStyle(el).display !== 'none' 更直接可靠）
注意：hidden 属性不受 CSS 覆盖，即使写了 [hidden] { display: block !important; }，浏览器仍会强制隐藏——这是它的设计保障。
