hidden 是布尔属性，存在即隐藏，不占布局、不响应事件、不被屏幕阅读器读取；误用 hidden="false" 无效，应 removeAttribute；与 aria-hidden 混用会导致可访问性问题；表单中带 hidden 的字段提交时被忽略；IE9 不支持，需 JS polyfill。
HTML hidden 属性为什么加了没效果
因为 hidden 是布尔属性，不是 CSS 控制开关——它直接让元素从渲染树中移除，连 display: none 都不经过。常见错误是把它当样式用，比如写成 hidden="false" 或 hidden="0"，其实只要存在这个属性，无论值是什么（甚至没值），浏览器就认为“隐藏”。
-
hidden是原生语义化隐藏，比style="display: none"更彻底：不占布局、不响应事件、不被屏幕阅读器读取 - 动态控制时别用
element.setAttribute('hidden', 'false')，应该用element.removeAttribute('hidden')显式移除 - 和 CSS 的
visibility: hidden完全不同：后者仍占空间、可响应事件、对辅助技术可见
hidden 和 aria-hidden 混用会出什么问题
两者目的不同，混用容易造成可访问性断裂。比如给一个按钮加 hidden 同时又设 aria-hidden="false"，结果是：视觉上消失、DOM 中不可达、但 ARIA 却声称“这里有个可交互元素”——屏幕阅读器会困惑甚至报错。
-
hidden会让整个元素及其子树从可访问树中删除，aria-hidden只影响该节点的可访问性暴露，不改变渲染 - 如果只是想隐藏视觉但保留键盘焦点或读屏支持（比如折叠面板的隐藏内容），应该用 CSS +
aria-hidden="true"，而不是hidden - React/Vue 等框架里用
v-if或{condition && <div>} 渲染控制，本质等价于 <code>hidden的 DOM 移除效果，此时再加aria-hidden属于冗余且易错hidden 在表单提交时会不会跳过字段
会。所有带
hidden属性的表单控件（<input>、<select></select>、<textarea></textarea>）在表单序列化（如form.submit()、FormData构造、form.elements遍历）时都会被忽略，哪怕它们有name和value。- 如果需要“视觉隐藏但参与提交”，用
style="position: absolute; left: -9999px"或class="sr-only"类，而不是hidden - 注意：CSS 的
opacity: 0或visibility: hidden不会影响表单提交，但它们不满足语义化隐藏需求 - 服务端不要假设带
hidden的字段一定没传——前端可能绕过 DOM 直接构造请求，校验仍需后端兜底
hidden 属性的兼容性和 polyfill 风险
IE10+ 原生支持
hidden，IE9 及更早版本完全不识别，也不会触发任何样式降级。试图用 CSS 规则[hidden] { display: none; }做兼容，对 IE9 无效，因为属性选择器本身就不被支持。立即学习“前端免费学习笔记（深入）”；
- 真要兼容 IE9，必须用 JS 动态添加 class（如
js-hidden）并配 CSS，不能依赖属性名 - 某些老旧 CMS 或富文本编辑器会自动过滤掉不认识的属性，
hidden可能被清掉，导致意外显示 - Shadow DOM 中
hidden行为一致，但若用slot投影内容，父组件设的hidden不会透传到 slot 内容上，得在 slot 内部单独控制
hidden，而是判断「该不该用」——它删的是语义，不是样式。 - 如果需要“视觉隐藏但参与提交”，用
