hidden 是布尔属性，仅存在即生效，合法写法为 hidden 或 hidden=""；JS 应用 el.hidden = true/false 控制，避免 setAttribute 和 display 混用，适用于内容不相关场景而非视觉隐藏。
hidden 属性怎么写才合法有效
它是个布尔属性，浏览器只看“有没有”，不解析值：hidden 或 hidden="" 都合法；hidden="true"、hidden="false"、hidden="0" 全部无效——这些写法会让元素依然隐藏，但违反 HTML5 规范，且可能被 Linter 报错或 CMS 过滤。
服务端模板里直接输出 hidden 即可，比如：<p hidden class="error">请输入邮箱</p>。别加引号包裹的值，也别试图用变量拼接字符串如 hidden="{{ shouldHide ? 'true' : 'false' }}"，那只会埋雷。
JS 动态控制 hidden 的正确姿势
别碰 setAttribute 和 removeAttribute，原生 DOM 属性更稳：
- ✅ 隐藏：
el.hidden = true（自动添加hidden属性） - ✅ 显示：
el.hidden = false（自动移除hidden属性） - ✅ 检查状态：
if (el.hidden) { }——返回布尔值，不是字符串 - ⚠️ 别写：
el.hidden = "true"（字符串赋值无效）或el.setAttribute('hidden', 'false')（等于又加了个hidden属性，元素还是隐藏） - ⚠️ 如果之前手动设过
el.style.display = 'none'，再设el.hidden = false也不会显示——得先清内联样式：el.style.display = ''
hidden 和 display: none 能不能混用
能写在一起，但逻辑上冲突，容易卡死：
立即学习“前端免费学习笔记（深入）”；
- ✅ 浏览器默认为
[hidden]应用display: none，所以你不需要额外写 CSS - ❌
<div hidden style="display: block;">我不会被隐藏</div>—— 内联display: block会覆盖[hidden]的display: none，导致隐藏失效 - ⚠️ 不要同时写
hidden和aria-hidden="true"：前者已让整个子树退出可访问性树，后者冗余且易引发屏幕阅读器困惑 - ⚠️ 表单中带
hidden的<input>、<select></select>会被完全忽略：FormData里没有，form.elements遍历时跳过，form.submit()不发送它们
什么场景该用 hidden，什么不该
hidden 声明的是“内容当前不相关”，不是“我暂时不想让你看见”：
- ✅ 适合：服务端条件渲染的错误提示、权限不足时的管理按钮、多步骤表单中未激活的步骤区域
- ❌ 不适合：需要过渡动画的折叠面板、需保留键盘焦点的“视觉隐藏”摘要、IE9 兼容环境（它根本不识别
hidden） - ⚠️ 真正容易被忽略的是语义边界——一旦你开始想“等会儿还要 show 出来”，就该怀疑是不是选错了工具；该用
opacity+pointer-events或max-height+overflow过渡，而不是hidden
