hidden属性是语义化开关，表示元素逻辑上不存在；其默认display:none常被CSS覆盖，需用!important确保生效，且JS操作后需手动清除内联样式，表单中hidden元素值不提交，适用场景强调辅助技术感知与语义准确性。
hidden 属性不是 CSS 隐藏的替代品，它是语义开关；加了就该“逻辑上不存在”，而不是“视觉上看不见”。
hidden 属性为什么加了却没隐藏
浏览器规范要求 [hidden] 默认触发 display: none，但实际不生效，90% 是因为 CSS 覆盖了它：
- 全局重置样式（如
div { display: block !important; }）没配[hidden] { display: none !important; } - 用了 Bootstrap、Tailwind 等框架，其基础样式层叠顺序把原生
[hidden]规则压没了 - CSS 文件加载晚于 HTML 解析，首屏闪现后才隐藏（尤其 SSR 场景）
解决方法只有一条：[hidden] { display: none !important; } 必须存在且生效，建议放在 @layer base 底部或 base.css 最末行。
JS 操作 element.hidden = false 后元素还是看不见
这不是 hidden 的问题，而是你之前手动设过 el.style.display = 'none' —— 这个内联样式不会被自动清除：
立即学习“前端免费学习笔记（深入）”；
-
el.hidden = true→ 元素隐藏（无视内联 display） -
el.hidden = false→ 仅移除 hidden 属性，el.style.display仍为'none'，继续压制显示 - 正确做法是：先清内联样式
el.style.display = ''，再设el.hidden = false
同理，如果用 class 控制显示（如 .hidden { display: none; }），别混用 hidden 属性，否则行为不可预测。
表单提交时 hidden 元素值丢失
<input hidden name="token" value="abc"> 在 form.submit() 时不会被提交 —— 这是 HTML 规范行为，不是 bug：
- 所有带
hidden属性的表单控件（<input>、<select></select>、<textarea></textarea>）都会被表单序列化逻辑忽略 - 若需提交但视觉隐藏，改用
type="hidden"（专为此设计）或aria-hidden="true"+position: absolute; left: -9999px -
hidden语义是“当前不相关”，而type="hidden"语义是“相关但不可见”，二者目的完全不同
什么时候必须用 hidden，而不是 display: none
关键看是否需要向辅助技术传递“此内容当前不该存在”的信号：
- 模态框未打开前的
<dialog hidden></dialog>：屏幕阅读器完全跳过，用户感知不到该功能存在 - 表单验证失败后才显示的错误提示：
<p hidden class="error">邮箱格式不正确</p>：初始状态语义明确，JS 显示时只需el.hidden = false - 服务端预渲染的占位内容（如骨架屏），将在 hydration 后被 JS 替换：用
hidden表达“暂无真实数据”，比display: none更准确
需要动画、过渡、保留布局空间、或仅临时遮挡交互时，hidden 就不合适——它没有中间态，只有“在”和“不在”两种状态。
