hidden 属性
使用 hidden 布尔属性切换元素的可见性。
hidden 属性 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
什么是 hidden
hidden 属性会使元素不可见，并将其从无障碍树中移除：
<p hidden>This paragraph is hidden.</p>
<!-- Equivalent to: display: none in CSS -->
<!-- The element is in the DOM but not rendered -->
<!-- Screen readers do not announce hidden elements -->hidden 是布尔属性
布尔属性只有存在（true）或不存在（false）两种状态——不需要值：
<!-- All of these are equivalent: -->
<div hidden>Content</div>
<div hidden="">Content</div>
<div hidden="hidden">Content</div>
<!-- Remove with JavaScript: -->
element.removeAttribute('hidden');
<!-- Or set: -->
element.setAttribute('hidden', '');hidden、display:none 与 visibility:hidden 的对比
隐藏元素的三种方式：
/* hidden attribute = display:none */
/* Element is removed from flow, invisible to AT */
/* visibility: hidden */
/* Element occupies space but is invisible */
/* Still read by some screen readers */
/* opacity: 0 */
/* Element occupies space, invisible, still interactive */
/* Still read by screen readers */
/* Hidden attribute is the simplest for fully hiding content */使用 JavaScript 切换可见性
通过添加或移除 hidden 属性来控制可见性：
const modal = document.getElementById('modal');
// Show:
modal.removeAttribute('hidden');
// or:
modal.hidden = false;
// Hide:
modal.setAttribute('hidden', '');
// or:
modal.hidden = true;
// Toggle:
modal.toggleAttribute('hidden');CSS 可以覆盖 hidden
CSS 的 display 可以覆盖 hidden 属性——请务必注意：
/* This makes hidden elements visible again: */
[hidden] {
display: block !important;
}
/* Do not do this unless you have a very specific reason */
/* The hidden attribute should be trusted as the source of truth for visibility */hidden 与 aria-hidden 的对比
两种不同类型的隐藏：
hidden— 在视觉上隐藏 AND 从无障碍树中移除aria-hidden="true"— 仅从无障碍树中隐藏，仍会在视觉上呈现
<!-- hidden: nothing sees it -->
<div hidden>Completely hidden</div>
<!-- aria-hidden: visual users see it, screen readers skip it -->
<span aria-hidden="true">★★★★☆</span>
<span class="sr-only">4 out of 5 stars</span>显示/隐藏模式
使用 hidden 实现经典的显示/隐藏切换：
<button
aria-expanded="false"
aria-controls="menu"
id="menu-btn"
>Menu</button>
<ul id="menu" hidden>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
<script>
document.getElementById('menu-btn').addEventListener('click', function() {
const menu = document.getElementById('menu');
const expanded = this.getAttribute('aria-expanded') === 'true';
menu.hidden = expanded;
this.setAttribute('aria-expanded', !expanded);
});
</script>until-found 值（新增）
HTML 5.1+ 引入了 hidden="until-found"，用于实现可搜索但已折叠的内容：
<details>
<summary>Read More</summary>
<div hidden="until-found" id="more-content">
<p>This content is collapsed but findable by Ctrl+F.</p>
</div>
</details>
<!-- hidden="until-found" hides visually but allows browser Ctrl+F to find and reveal it -->
<!-- Only supported in Chromium-based browsers currently -->屏幕阅读器行为
hidden 属性会让辅助技术完全隐藏内容：
- 屏幕阅读器会跳过隐藏元素
- Tab 焦点不会进入隐藏元素
- 对于模态框、画布外菜单以及隐藏时不应被遍历的条件面板，这是正确的做法
常见使用场景
以下情况适合使用 hidden 属性：
- 打开前的模态对话框
- 选项卡面板内容（显示活动选项卡的面板，隐藏其他面板）
- 分步骤向导（显示当前步骤）
- 渐进式披露（点击后显示更多信息）
- 加载状态（用内容替换加载指示器）
持久化隐藏状态
使用 localStorage 在页面加载之间记住可见性状态：
const panel = document.getElementById('info-panel');
const key = 'info-panel-visible';
// Restore state:
if (localStorage.getItem(key) === 'false') {
panel.hidden = true;
}
// On toggle:
document.getElementById('toggle-btn').addEventListener('click', () => {
panel.hidden = !panel.hidden;
localStorage.setItem(key, !panel.hidden);
});快速检查
hidden 属性与 aria-hidden 有什么区别？
回顾：hidden 属性
hidden 属性要点：
hidden— 等同于display: none- 布尔属性：存在 = 隐藏，不存在 = 可见
- 会从无障碍树中移除（不同于
visibility: hidden） - 使用
element.hidden = true/false切换 aria-hidden="true"仅从 AT 中隐藏，但保留视觉呈现
常见问题解答
「hidden 属性」课时是免费的吗？
是的 — 「hidden 属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「hidden 属性」这节课中我会学到什么？
使用 hidden 布尔属性切换元素的可见性。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「hidden 属性」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。