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