HTML5的hidden属性用于逻辑隐藏元素：不渲染、不占空间、不被屏幕阅读器读取，但DOM仍存在且JS可访问；而display: none是CSS视觉隐藏，彻底退出渲染流但无语义，且不可动画。
HTML5 的 hidden 属性到底干啥用
hidden 是 HTML5 原生布尔属性，加在任意元素上就让它「逻辑隐藏」：不渲染、不占空间、不被屏幕阅读器读取（默认行为），但 DOM 节点依然存在，JS 可以正常访问 element.hidden 或操作 element.setAttribute('hidden', '')。
它不像 JS 手动改 style.display 那样依赖 CSS，也不受外部样式表干扰，语义清晰——适合表达“这个内容当前不该出现”，比如表单步骤中未激活的面板、加载完成前的占位区。
- 支持所有 HTML 元素（包括
<script></script>、<template></template>） - 可被 CSS 覆盖：
[hidden] { display: block !important; }会强制显示（但违背语义） - JS 中读写便捷：
el.hidden = true等价于el.setAttribute('hidden', '')
display: none 的实际效果和副作用
display: none 是 CSS 规则，让元素彻底退出渲染流：不占空间、不触发重排重绘、不响应事件、不被辅助技术识别。但它和元素是否「该存在」无关，只是视觉开关。
常见陷阱在于它容易被其他 CSS 覆盖（比如某个父级设置了 display: flex，子元素又写了 display: none，结果被继承或层叠规则意外覆盖），而且无法直接通过 HTML 属性控制，必须走 JS 操作 style.display 或切换 class。
立即学习“前端免费学习笔记（深入）”；
在 AgentBlog（blog.agentloka.ai）上作为已认证 AI 代理发布博客文章，支持发布、编辑、删除、评论、浏览和阅读长篇内容。
- 动画不支持：
display不是可过渡属性，不能做transition - 影响布局计算：父容器高度可能塌陷，需额外处理（如用
visibility: hidden+height: 0替代） - JS 查询时仍能拿到元素，但
getBoundingClientRect()返回全零值
什么时候该用 hidden，什么时候必须用 display: none
选 hidden 当你关心语义和简易控制：服务端渲染初始状态、条件渲染逻辑简单、需要和 ARIA 属性配合（如 aria-hidden="true" 可省略）。
选 display: none 当你需要精细控制渲染时机、做动画、或绕过浏览器对 hidden 的默认行为（比如某些旧版 Safari 对 hidden 支持不一致，或你想隐藏但保留焦点能力——这时其实该用 visibility: hidden + position: absolute）。
- 动态 Tab 切换：用
hidden更干净，避免 class 切换污染样式表 - 模态框遮罩层：用
display: none更稳妥，防止hidden被 CSS 意外覆盖导致白屏 - SEO 敏感内容（如折叠 FAQ）：两者都可，但
hidden更明确告诉爬虫“暂不展示”，而display: none可能被误判为隐藏文本
兼容性和实操建议
hidden 在 IE10+、Edge、Chrome 23+、Firefox 22+、Safari 6+ 均支持；IE9 及以下不支持，需 fallback：
if (typeof document.createElement('div').hidden === 'undefined') {
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('[hidden]').forEach(el => el.style.display = 'none');
});
}
但更推荐统一用 class 控制，比如定义 .is-hidden { display: none; }，再用 JS 切换——这样既兼容老浏览器，又避免 hidden 和 display 冲突导致的调试困难。
真正容易被忽略的是：当元素同时有 hidden 属性和 display: block 样式时，hidden 优先级更高（浏览器内部等价于加了 [hidden] { display: none !important; }）。别指望靠 CSS 覆盖它来“临时显示”，得先移除 hidden 属性。
