hidden是HTML5语义化布尔属性，声明元素当前不适用上下文，影响可访问性树、表单提交及SEO，但DOM仍存在且JS可访问；它非display:none语法糖，不可动画，可被CSS覆盖。
hidden 属性不是“视觉技巧”，而是语义开关
它告诉浏览器和辅助技术：“这个元素当前不相关，不该被渲染、聚焦或朗读”。hidden 不是 CSS，不依赖样式优先级，也不靠颜色/尺寸/定位障眼法——它是 HTML5 原生布尔属性，等效于 display: none，但自带语义意图。
常见错误是把它当 visibility: hidden 用：比如在表单里给 <input> 加 hidden，以为只是“看不见”，结果用户 Tab 还能跳进去；或者误以为加了 hidden 就自动屏蔽屏幕阅读器，却忘了某些旧 UA 对它的支持不一致。
-
hidden会被 CSS 覆盖：写[hidden] { display: block; }就失效了，这不是 bug，是设计使然 - JS 操作最轻量：
el.hidden = true不触发 layout 计算，比切 class 或改 style 快 - Vue/React 中直接
hidden={condition}安全；Svelte 需配合class:hidden绑定，否则 SSR 时可能漏掉 - IE9 及以下不支持，但现代项目基本无需兼容
是表单数据信使，不是隐藏 UI 元素
<input type="hidden"> 的唯一职责是携带数据：它不出现在页面上，不参与布局，不响应事件，但在表单提交时会像其他 <input> 一样把 name 和 value 发送到服务器。它和 hidden 属性完全无关，不能用来隐藏段落、按钮或 div。
典型翻车点：用 <input type="hidden" value="admin"> 传权限角色，却不校验后端——用户打开 DevTools 改 value 就能提权；或者把它塞进非表单上下文（比如放在 <div> 里当状态变量），结果根本不会随请求发出。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>只用于 <code><form></form> 内部，且必须有 name 属性才有效
product_id、csrf_token 等都必须服务端二次验证<input type="hidden"> 会以数组形式提交，注意后端解析逻辑aria-hidden="true" 只管读屏器，不管眼睛和键盘
aria-hidden="true" 的作用域非常窄：它只对辅助技术（如屏幕阅读器）说“忽略这个节点”，但元素依然可见、可 Tab、可点击、占布局空间。把它当隐藏方案用，等于只蒙住盲人的耳朵，却让明眼人继续看到、键盘用户继续跳进去。
常见误用：给弹窗遮罩层加 aria-hidden="true" 却没配 display: none；或者给图标 <svg></svg> 加了 aria-hidden="true"，却忘了父级 <button></button> 本身仍需 aria-label 说明功能。
- 仅适用场景：装饰性图标、重复文本标签、模态框开启时的背景内容
- 永远别单独用于可交互元素（
<button></button>、<a></a>、<input>）——焦点与语义会断裂 - 和
hidden不互斥：需要视觉+语义双重隐藏时，可同时用hidden+aria-hidden="false"（冗余兜底） - 对搜索引擎、打印样式、CSS 渲染完全无影响
opacity: 0 不是隐藏，是“透明化”
opacity: 0 只改变透明度，元素仍在 DOM 中、占位、响应事件、接受焦点。很多动画切换卡顿或点击穿透问题，根源就是只写了 opacity: 0 却漏掉配套控制。
典型现象：轮播图淡出旧图后，用户快速连点两下，触发两次回调；或者用 opacity: 0 隐藏表单字段，Tab 键仍停在空白处。
- 必须三件套齐上：
opacity: 0+pointer-events: none+tabindex="-1" - 搭配
transition: opacity 0.3s流畅，且只触发重绘（repaint），不重排（reflow） - 子元素继承 opacity，但
pointer-events: none不继承，需显式设置或用父级控制 - 视频、音频等媒体元素在
opacity: 0下仍可能继续播放，display: none更可靠
hidden / display: none），还是保留占位但不可见（visibility: hidden），或是仅对读屏器屏蔽（aria-hidden），又或者只是做过渡动画（opacity）。选错一个，后续的无障碍、性能、安全问题就都跟着来了。
