hidden属性是HTML5语义化隐藏机制，仅声明内容当前不可感知，浏览器自动应用display: none但核心在于可访问性控制；它不可动画、不占布局、屏幕阅读器跳过，适用模态框未打开等场景，区别于aria-hidden仅影响无障碍树。

Hidden属性不控制CSS显示状态，它只影响语义可见性与可访问性。 设置hidden会让元素从渲染树中移除（类似display: none的视觉效果），但它的核心作用是向浏览器和辅助技术声明“此内容当前不应被用户感知”，属于语义层面的隐藏，而非样式控制。

hidden 属性的本质是语义标记

HTML5 中 hidden 是一个布尔属性，只要存在即生效。它告诉浏览器：“这个元素在当前上下文中逻辑上不可见、不应被聚焦、不应被屏幕阅读器朗读”。这不同于 CSS 的 visibility: hidden（仍占布局空间、仍可聚焦）或 opacity: 0（完全透明但交互依然有效）。

• 浏览器会自动为 [hidden] 应用 display: none（规范要求），但这是实现手段，不是设计目的
• 屏幕阅读器会跳过 hidden 元素，即使它意外获得了焦点（现代浏览器通常也会阻止其获得焦点）
• JavaScript 中 element.hidden 属性可读写，修改它等价于添加/移除 hidden 属性

不要用 hidden 替代 CSS 显示控制

如果目标是切换视觉呈现（比如折叠面板、动画淡入），应优先使用 CSS 类配合 display、opacity 或 transform。因为：

• hidden 无法过渡或动画——它只有“存在”或“不存在”两种状态，没有中间过程
• 滥用 hidden 可能破坏可访问性预期：例如，在加载中临时隐藏按钮却未提供加载状态提示，屏幕阅读器用户会感知到功能“消失”而非“暂不可用”
• 服务端渲染或静态 HTML 中，hidden 是明确的初始状态声明；而 CSS 类更适合运行时动态行为

适合使用 hidden 的典型场景

当内容确实“当前无意义”或“尚未就绪”，且无需用户感知时，hidden 是最准确的语义表达：

• 模态框未打开前的内容：<dialog hidden>…</dialog>
• 表单验证失败后才显示的错误提示（初始隐藏）：<p hidden class="error">邮箱格式不正确</p>
• 响应式中针对特定断点隐藏的冗余内容（配合 JS 检测）：<div hidden id="mobile-nav">…</div>
• 服务端预渲染的占位内容，将在客户端 hydration 后被替换

与 aria-hidden 的关键区别

hidden 是全局隐藏（视觉 + 可访问性 + 焦点），而 aria-hidden="true" 仅影响可访问性树，不改变视觉渲染：

• <button hidden>删除</button> → 按钮完全不可见、不可聚焦、不被朗读
• <button aria-hidden="true">删除</button> → 按钮仍可见、可点击、可聚焦，但屏幕阅读器忽略它（常用于装饰性图标）
• 二者不要混用；若需完全隐藏，用 hidden 更简洁可靠

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！