hidden属性是html5语义化布尔属性，声明内容当前逻辑不可见、不占布局、屏幕阅读器跳过，但dom仍存在且js可访问；它触发display:none视觉效果，本质却是向浏览器和辅助技术传达“当前不适用”的语义意图。
hidden 属性不是 CSS 显示开关，而是语义标记 —— 它告诉浏览器“这个内容当前逻辑上不该存在”，不是“让它看起来透明或缩成一个点”。
hidden 属性到底触发什么行为
浏览器对 hidden 的处理是规范强制的：只要元素有该属性，就会自动应用 display: none，同时跳过可访问性树、阻止焦点进入、不参与布局计算。但它不改变 DOM 结构，document.getElementById('x') 仍能取到，el.hidden 读写也直接生效。
- 它不是样式控制手段，不能被
visibility或opacity替代 - 它不可动画 ——
transition: display无效，@keyframes里也不能用 - 它的优先级低于显式 CSS：比如
[hidden] { display: block !important; }会强行显示，但这是反模式 - 它对
<script></script>、<template></template>、<meta>等非渲染元素也有效（虽然视觉上本就不显示）
为什么 display: none 不等于 hidden
两者视觉效果常一样，但底层意图和副作用完全不同。
-
display: none是纯渲染指令，不带语义；hidden是 HTML5 布尔属性，表达“当前无关” -
display: none可能被父容器的display: flex或grid意外覆盖（比如子项设了display: none，但父项用了flex-direction: column并设置了高度，某些旧版 Safari 会误判）；hidden不受这类层叠干扰 -
display: none下，el.offsetWidth和getBoundingClientRect()都返回0；hidden元素同理，但这是结果，不是目的 - 想做淡入动画？必须用
opacity+visibility，再配合 JS 切换hidden—— 不能只靠hidden
hidden 被误用的三个典型场景
很多问题不是属性不好用，而是用错了上下文。
- 用
hidden控制 Tab 面板切换：看似干净，但若面板内有autofocus输入框，隐藏后又显示，焦点行为可能错乱；更稳妥的是用aria-hidden+tabindex="-1"组合 - 在 SSR 页面中初始渲染就加
hidden，但 JS 加载失败时，内容永远不可见 —— 应配合 fallback class 或服务端条件判断 - 给
<a href="https://www.php.cn/link/6c1f11f779599fe6d280c41d644ed43b"></a>链接的目标节设置hidden：违反规范，因为用户点击链接后无法到达目标；应该用 JS 动态移除hidden再滚动，或改用aria-expanded控制折叠状态
兼容性和降级怎么处理
IE9 及以下完全不识别 hidden，而现代浏览器支持已非常稳定（Chrome 23+、Firefox 22+、Safari 6+、Edge 12+）。但降级不能只靠 CSS。
- 不要只写
[hidden] { display: none; }—— 这在不支持的浏览器里毫无作用 - 服务端渲染时，可用
data-hidden代替，并在 JS 初始化时批量转换：document.querySelectorAll('[data-hidden]').forEach(el => el.hidden = true) - 若需精确控制旧版 IE，建议统一走 class 方案（如
.is-hidden），并用el.classList.toggle('is-hidden', condition)替代hidden操作 - 注意：即使加了 polyfill，
el.hidden = true在 IE9 中也不会触发display: none，必须手动设置style.display = 'none'
最易被忽略的一点：hidden 不影响脚本执行和表单提交 —— <input type="text" hidden> 的值依然会随表单提交，<script hidden></script> 里的代码照常运行。这不是 bug，是设计使然；但如果你以为“隐藏=禁用”，就会踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
