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"> 是一种表单控件类型，只用于提交数据，不参与页面布局或用户交互。
-
<div hidden>文字</div>：视觉消失、不占空间、不响应事件、不被屏幕阅读器读取 -
<input type="hidden" name="token" value="abc123">：不渲染 UI，但会随表单一起提交，且保留在form.elements中
两者目的不同，不能互相替代。想“隐藏但提交字段”，用 type="hidden"；想“语义化地移除无关内容”，用 hidden 属性。
hidden 会影响表单提交和可访问性链路
带 hidden 的表单控件（如 <input hidden>、<select hidden></select>）在序列化时会被完全忽略：
-
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 直接构造请求，校验必须后端兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
