hidden 属性存在即移除元素于渲染树，仅需写 hidden 或 hidden=""，JavaScript 应用 removeAttribute('hidden') 显示；它与 type="hidden" 用途不同，且影响表单提交和可访问性，IE9 不支持需 polyfill。
hidden 属性不是 CSS 开关，也不是“设为 false 就显示”的布尔开关——只要它存在，元素就彻底从渲染树中移除。
hidden 属性一写就生效，别加值
常见错误是写成 hidden="false"、hidden="0" 或 hidden="hidden"。这些写法全无效：浏览器只看属性是否存在，不解析它的值。正确写法只有两种：
-
<div hidden>内容</div>（推荐，语义清晰） -
<div hidden="">内容</div>（等价，空字符串也成立）
用 JavaScript 控制时，要显示元素必须调用 element.removeAttribute('hidden')；不要用 setAttribute('hidden', 'false')，那只是又加了一个属性，依然隐藏。
hidden 和 type="hidden" 的 input 完全不是一回事
这是最容易混淆的点：hidden 是全局 HTML5 属性，作用于任意元素；而 <input type="hidden"> 是一种表单控件类型，只用于提交数据，不参与页面布局或用户交互。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<div hidden>文字</div>：视觉消失、不占空间、不响应事件、不被屏幕阅读器读取 -
<input type="hidden" name="token" value="abc123">：不渲染 UI，但会随表单一起提交，且保留在form.elements中
两者目的不同，不能互相替代。想“隐藏但提交字段”，用 type="hidden"；想“语义化地移除无关内容”，用 hidden 属性。
hidden 会影响表单提交和可访问性链路
带 hidden 的表单控件（如 <input hidden>、<select hidden>）在序列化时会被完全忽略：
-
form.submit()不发送它们 -
new FormData(form)不包含它们 -
form.elements遍历时跳过它们
同时，hidden 会让整个子树从可访问树中删除。所以不要混用 aria-hidden="true" 或 aria-hidden="false"——这会造成语义冲突，让屏幕阅读器困惑。如果只是视觉隐藏但需保留焦点或读屏支持（比如折叠面板），应该用 CSS + aria-hidden="true"，而不是 hidden。
兼容性与 polyfill 要小心
hidden 在 IE10+ 原生支持，IE9 及更早版本完全不识别，且连 [hidden] { display: none; } 这类 CSS 降级都无效（因为 IE9 不支持属性选择器）。真要兼容 IE9，必须用 JS 动态添加 class（如 js-hidden）并配 CSS 规则，不能依赖属性本身。
服务端永远不能假设带 hidden 的字段一定没传——前端可以绕过 DOM 直接构造请求，校验必须后端兜底。
