hidden是HTML5唯一专为隐藏设计的布尔全局属性，语义声明“元素当前逻辑上不存在”，使元素不渲染、不占空间、不可聚焦且屏幕阅读器跳过；写法为<div hidden>，JS通过el.hidden=true/false控制，不依赖CSS但需兜底防FOVC。
用 hidden 属性隐藏元素最直接
HTML 全局属性中，唯一专为“隐藏”设计的就是 hidden 布尔属性。它语义清晰、无需 CSS、浏览器原生支持，效果等同于 display: none：元素不渲染、不占空间、不可聚焦、屏幕阅读器默认跳过。
写法很简单：<div hidden>临时下线内容</div>。JS 控制也轻量：el.hidden = true 或 el.hidden = false 即可切换。
注意几个实际坑点：
-
hidden会被 CSS 覆盖——比如写了[hidden] { display: block; }，那它就失效了 - IE9 及更早版本不支持，但现代项目基本不用考虑兼容性问题
- 别和
aria-hidden混用：aria-hidden="true"只影响读屏软件，视觉上完全没变化
aria-hidden="true" 不是隐藏属性，只是屏蔽读屏器
它不属于“隐藏页面元素”的解决方案，而是一个可访问性（a11y）辅助属性。设置后，屏幕阅读器会忽略该元素及其子树，但元素依然可见、可点击、占布局空间。
立即学习“前端免费学习笔记（深入）”；
典型误用场景：
- 想隐藏敏感信息却只加
aria-hidden="true"→ 视力正常用户照常看见 - 用它替代
hidden或display: none实现视觉隐藏 → 完全无效 - 父元素设了
aria-hidden="true"，又忘了给某个关键子元素显式加aria-hidden="false"→ 交互控件被读屏器跳过
全局属性里没有 visibility 或 opacity
这两个是 CSS 属性，不是 HTML 全局属性。HTML 全局属性列表中并不存在 visibility、opacity、display 等样式控制项——它们必须通过 style 属性或外部 CSS 引入。
所以如果你看到 <div visibility="hidden"> 或 <span opacity="0">，那是无效写法，浏览器会忽略这些自定义属性，元素照常显示。
真正能用在标签上的全局属性只有：hidden、contenteditable、draggable、spellcheck 等，和隐藏强相关的仅 hidden 一个。
为什么不用 class 或 id 配合 CSS 隐藏？
class 和 id 是全局属性，但它们本身不隐藏元素，只是提供钩子让 CSS 或 JS 找到目标。比如 <div class="visually-hidden"> 能否隐藏，完全取决于你是否写了对应 CSS 规则：.visually-hidden { display: none; }。
这种做法常见但有风险：
- 样式可能被其他 CSS 覆盖（比如更高优先级的选择器重置了
display） - 团队协作时，类名含义模糊（
hidden、invisible、sr-only各自用途不同） - 服务端渲染或静态 HTML 中，若 CSS 加载失败或被禁用，元素会意外暴露
相比之下，hidden 是 HTML 规范保障的行为，只要浏览器支持，就一定生效，不依赖样式加载时机。
