hidden属性与display:none本质不同：前者是html5语义化布尔属性，影响dom可访问性、表单提交和seo，且可被css覆盖；后者是css渲染控制，彻底移除元素于渲染树。
hidden 属性不等同于 display:none，两者在渲染路径、DOM 可访问性、语义和可覆盖性上完全不同。
hidden 是 HTML5 布尔属性，不是 CSS 规则
hidden 是原生 HTML 属性，写在标签上即生效：<div hidden>内容</div>。它不依赖 CSS 解析，也不受外部样式表干扰；而 display: none 是 CSS 声明，必须经过样式计算、层叠、继承等流程才起作用。
- JS 读取
el.hidden是布尔值，直接反映语义状态；el.style.display只读内联样式，无法准确判断最终是否隐藏 - 服务端渲染时，
hidden在 HTML 初始解析阶段就生效，避免首屏“闪现”；display: none若靠 JS 注入，则存在渲染间隙 -
hidden支持所有元素，包括<script></script>和<template></template>；display: none对<script></script>无效（脚本仍会执行）
display:none 会切断子元素渲染链，hidden 不会
父元素设 display: none 后，子元素无论怎么写 display: block 或 visibility: visible 都无效——浏览器根本不会构造它的渲染树节点；而父元素设 hidden，子元素可以显式移除该属性或用 CSS 覆盖：[hidden] > * { display: block; } 或 el.querySelector('input').hidden = false。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 表单场景中，
display: none的<input>不会提交数据、无法聚焦、checkValidity()返回true（被跳过）；hidden下的<input>仍保留在表单数据流中，仅语义暂不适用 - 动画中不能对
display做transition，但[hidden]可配合opacity或transform实现渐隐 - 某些旧版 Safari 对
visibility: hidden + pointer-events: none组合支持不稳定，hidden则无此兼容问题
CSS 覆盖能力差异极大
[hidden] { display: block !important; } 是合法且有效的 CSS 规则，意味着你可以用样式“驳回”语义隐藏；但你无法用普通 CSS 把一个硬编码的 style="display:none" 覆盖成可见，除非用 !important 打破内联优先级——这违背可维护原则。
- 响应式场景下，用媒体查询控制
[hidden]显隐比反复切换 class 更干净：@media (min-width: 768px) { [hidden].desktop-only { display: block; } } - 组件库封装时，把
hidden作为默认开关，下游可通过 CSS 主动取消，而display: none必须靠 JS 或 class 控制，耦合度高 - SEO 和读屏器行为不同：搜索引擎可能索引
hidden内容（视上下文），但几乎从不索引display: none的内容；屏幕阅读器默认跳过hidden，但对display: none直接忽略（不进无障碍树）
真正容易被忽略的是：hidden 不等于“视觉不可见”，而是“当前上下文不适用”；如果你只是想让元素透明但保留交互，opacity: 0 加 pointer-events: none 才对；如果要彻底移出布局流且不参与任何渲染，display: none 才是正解——选错会导致表单失效、动画卡顿、读屏器误报或 SEO 损失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
