hidden 属性是“存在即不可见”的布尔声明，仅检测是否存在而非值；el.hidden = false 才能显示，设 hidden="false" 仍隐藏；与 display: none 混用会失效；表单中带 hidden 的控件不提交；IE9 不支持且无降级样式；不支持 CSS 动画。
hidden 属性不是“设了就隐藏、设 false 就显示”的开关，而是“存在即不可见”的布尔声明——只要属性在 DOM 上，浏览器就彻底移除该元素的渲染、焦点和可访问性支持。
为什么 hidden="false" 无效
浏览器只检测属性是否存在，不解析它的值。写成 hidden="false"、hidden="0" 或 hidden="hidden"，效果和 hidden 一模一样：元素依然被剔出渲染树。
- 正确静态写法只有两种：
<div hidden>或<div hidden=""> - JS 动态控制必须用布尔赋值：
el.hidden = true/el.hidden = false，后者会自动移除属性 - 千万别用
el.setAttribute('hidden', 'false')——这等于又加了一个hidden属性，还是隐藏 - 检查状态直接读
el.hidden，别用el.hasAttribute('hidden')，因为初始 HTML 里写了hidden的元素，即使 JS 设过el.hidden = false，hasAttribute仍可能返回true
hidden 和 display: none 混用会卡住
如果你先用 JS 设置了 el.style.display = 'none'，再执行 el.hidden = false，元素依然不可见——因为内联 display: none 的优先级高于 hidden 触发的默认样式。
-
hidden是语义声明，display: none是样式声明，两者不互斥但会打架 - 常见翻车场景：组件卸载时设
style.display = 'none'，后续用hidden切换，结果白屏 - 解法：切换前先清内联样式：
el.style.display = ''，再设el.hidden = false - 服务端渲染（SSR）首屏若没配
[hidden] { display: none !important; }，可能闪现内容，尤其 hydration 不同步时
表单控件带 hidden 会被提交忽略
所有带 hidden 的 <input>、<select>、<textarea> 在表单序列化时完全消失：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
form.submit()不发送它们 -
new FormData(form)不包含它们 -
form.elements遍历时跳过它们 - 想“视觉隐藏但参与提交”，得用
style="position: absolute; left: -9999px"或class="sr-only"，而不是hidden - 后端永远不能假设带
hidden的字段一定没传——前端可绕过 DOM 直接构造请求，校验必须后端兜底
IE9 兼容和 polyfill 的真实限制
hidden 在 IE10+ 原生支持，IE9 及更早版本既不识别该属性，也不支持 [hidden] 这类 CSS 属性选择器，所以连降级样式都失效。
- 试图用
[hidden] { display: none; }兜底，在 IE9 下完全不起作用 - 真要兼容 IE9，必须用 JS 动态加 class（如
js-hidden），再配.js-hidden { display: none; } - 某些 CMS 或富文本编辑器会过滤未知属性，
hidden可能被自动删掉，导致意外显示 - Shadow DOM 中行为一致，但
<slot>投影内容不会继承父级的hidden，需在 slot 内部单独控制
最常被忽略的是：它不支持动画、过渡或中间状态，transition: display 无效，@keyframes 里也不能靠它控制帧——需要动效，必须切 CSS 类配合 opacity 或 max-height。
