hidden属性是html5语义化布尔属性，声明元素当前逻辑不可见、不占布局、屏幕阅读器跳过，浏览器强制应用display:none实现，但本质是传达“内容不适用”的语义意图而非视觉控制。
hidden 属性不是 CSS 隐藏开关，而是语义声明 —— 它告诉浏览器“这个元素当前逻辑上不该存在”，浏览器据此移除渲染、跳过可访问性树、阻止焦点进入。
hidden 属性如何触发 display: none
HTML5 规范强制要求浏览器对带 hidden 属性的元素自动应用 display: none，这是实现手段，不是目的。它不依赖任何外部样式表，哪怕你没写 [hidden] { display: none; }，现代浏览器（Chrome 23+、Firefox 22+、Safari 6+、Edge、IE10+）也会这么做。
- 它直接从渲染树中剔除元素，所以
getBoundingClientRect()返回全零，offsetHeight立即为 0 - DOM 节点仍在，
document.getElementById('x')和el.hidden读写都正常 - 若你手动设过
el.style.display = 'none'，之后再设el.hidden = false，那个内联display: none不会自动清除，元素仍不可见 —— 这是 JS 控制时最常卡住的地方 - 服务端渲染（SSR）中，若未配
[hidden] { display: none !important; }兜底，首屏可能闪现内容，尤其 hydration 不同步时
hidden 与 display: none 的关键行为差异
两者视觉效果相似，但底层机制和影响完全不同：
-
hidden是布尔属性：存在即生效，hidden="false"或hidden="0"无效，必须用el.removeAttribute('hidden')恢复可见 -
display: none是 CSS 声明，可被其他 CSS 覆盖（比如父级display: flex+ 子级权重不足的选择器），而hidden的默认行为无法被普通 CSS 绕过（除非显式写[hidden] { display: block !important; }，但这是反模式） -
hidden会让表单控件（<input>、<select></select>、<textarea></textarea>）在提交时被忽略 —— 即使有name和value，也不会出现在FormData或form.elements中 -
display: none不影响表单提交，但也不提供语义控制；想“视觉隐藏但参与提交”，得用position: absolute; left: -9999px或sr-only类
hidden 不可动画、不可过渡，也不能混用 aria-hidden
它只有“存在”或“不存在”两种状态，没有中间过程：
-
transition: display无效，@keyframes里不能用hidden控制动画帧 - 不要同时写
hidden和aria-hidden="true"：前者已让整个子树退出可访问性树，后者冗余且易引发冲突（比如aria-hidden="false"会误导屏幕阅读器） - 如果目标是折叠面板、淡入淡出、高度过渡等动效，必须用 CSS 类切换
display/opacity/transform，而不是hidden - IE9 及以下完全不支持
hidden属性，连属性选择器[hidden]都不识别，polyfill 必须走 class + JS，不能只靠 CSS
真正难的不是“怎么让它消失”，而是判断该不该用它：当你要表达“这个内容当前不相关”，且不需要动画、不参与表单提交、也不需保留占位空间时，hidden 才是最干净的选择；一旦涉及视觉渐变、键盘焦点管理、SSR 同构或旧浏览器兼容，就得立刻切回 CSS + JS 组合方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
