hidden属性是HTML5中用于语义化隐藏元素的布尔属性，仅存在即生效，正确写法为<div hidden>，错误写法如hidden="true"。
在HTML5中，用hidden属性隐藏元素，本质是做语义声明：告诉浏览器和辅助技术“这个内容当前不相关、不该被用户感知”。它不是样式技巧，而是标准级的可访问性控制手段。
hidden属性怎么写才有效
它是一个布尔属性，只要存在就生效，无需赋值：
- 正确写法：
<div hidden>暂不可见的内容</div> - 错误写法：
<div hidden="true">...或<div hidden="">...（虽部分浏览器兼容，但不符合规范） - 服务端渲染时直接输出
hidden即可，如：<p hidden class="error">请输入有效邮箱</p>
为什么它能防止辅助工具读取
hidden触发的是浏览器原生行为：元素从渲染树中移除，同时默认从无障碍树（Accessibility Tree）中剔除。这意味着：
- 屏幕阅读器完全跳过该元素，即使它意外获得焦点，现代浏览器也会阻止聚焦
- 它不依赖CSS是否生效——即使外部样式表试图覆盖，浏览器仍会按规范优先执行
hidden逻辑 - 与
aria-hidden="true"不同，后者只影响无障碍树，视觉上仍可见；而hidden是视觉+可访问性+交互能力三重屏蔽
配合CSS兜底更可靠
虽然浏览器默认为[hidden]应用display: none，但为防极端样式冲突（比如第三方库强制设display: block !important），建议在项目基础CSS中加入：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
[hidden] { display: none !important; }这条规则确保语义意图不被视觉表现破坏，尤其在SSR首屏或Hydration不同步时避免内容闪现。
适合用hidden的典型场景
关键判断标准是：内容当前是否“逻辑上不存在”或“尚未就绪”，而非单纯“不想看见”：
- 模态框未打开前：
<dialog hidden>... - 表单验证失败后才显示的提示（初始状态）：
<p hidden class="error">密码长度不足8位</p> - 响应式中JS检测后才启用的移动端导航：
<nav hidden id="mobile-nav">... - 服务端预渲染的占位内容，将在客户端激活后替换
