hidden属性是HTML5语义化隐藏机制，仅声明内容当前不可感知，浏览器自动应用display: none但核心在于可访问性控制；它不可动画、不占布局、屏幕阅读器跳过，适用模态框未打开等场景，区别于aria-hidden仅影响无障碍树。
Hidden属性不控制CSS显示状态，它只影响语义可见性与可访问性。
设置
会让元素从渲染树中移除（类似
的视觉效果），但它的核心作用是向浏览器和辅助技术声明“此内容当前不应被用户感知”，属于语义层面的隐藏，而非样式控制。
hidden 属性的本质是语义标记
HTML5 中
是一个布尔属性，只要存在即生效。它告诉浏览器：“这个元素在当前上下文中逻辑上不可见、不应被聚焦、不应被屏幕阅读器朗读”。这不同于 CSS 的
（仍占布局空间、仍可聚焦）或
（完全透明但交互依然有效）。
浏览器会自动为
应用
（规范要求），但这是实现手段，不是设计目的
屏幕阅读器会跳过
元素，即使它意外获得了焦点（现代浏览器通常也会阻止其获得焦点）
JavaScript 中
属性可读写，修改它等价于添加/移除
属性
不要用 hidden 替代 CSS 显示控制
如果目标是切换视觉呈现（比如折叠面板、动画淡入），应优先使用 CSS 类配合
、
或
。因为：
无法过渡或动画——它只有“存在”或“不存在”两种状态，没有中间过程
滥用
可能破坏可访问性预期：例如，在加载中临时隐藏按钮却未提供加载状态提示，屏幕阅读器用户会感知到功能“消失”而非“暂不可用”
服务端渲染或静态 HTML 中，
是明确的初始状态声明；而 CSS 类更适合运行时动态行为
适合使用 hidden 的典型场景
当内容确实“当前无意义”或“尚未就绪”，且无需用户感知时，
是最准确的语义表达：
立即学习
“
前端免费学习笔记（深入）
”；
模态框未打开前的内容：
表单验证失败后才显示的错误提示（初始隐藏）：
响应式中针对特定断点隐藏的冗余内容（配合 JS 检测）：
服务端预渲染的占位内容，将在客户端 hydration 后被替换
与 aria-hidden 的关键区别
是全局隐藏（视觉 + 可访问性 + 焦点），而
仅影响可访问性树，不改变视觉渲染：
→ 按钮完全不可见、不可聚焦、不被朗读
→ 按钮仍可见、可点击、可聚焦，但屏幕阅读器忽略它（常用于装饰性图标）
二者不要混用；若需完全隐藏，用
更简洁可靠
hiddendisplay: nonehiddenvisibility: hiddenopacity: 0[hidden]display: nonehiddenelement.hiddenhiddendisplayopacitytransformhiddenhiddenhiddenhidden邮箱格式不正确
hiddenaria-hidden="true"hidden