<details> 默认收起，不加 open 属性即可；<summary> 仅支持短语级内容，禁用块级元素；内部表单控件收起时仍可键盘访问，属规范行为。
<details> 标签是原生支持的折叠组件，不用 JS 就能实现 FAQ 的展开/收起，但默认全部收起、不能批量控制、<summary> 里不能塞块级元素——这些细节不注意，FAQ 页面很快就会出样式错位或交互失效的问题。
让每个 FAQ 项默认收起，但允许用户点击展开
浏览器对 <details> 的规范定义就是默认收起，不需要额外设置。只要不加 open 属性，它就一定收起；加了就一定展开，没有中间态，也不依赖 CSS 或 JS 判断逻辑。
常见错误是试图用 style="display: block" 强行显示内容——这会破坏语义、影响可访问性，且屏幕阅读器无法识别状态变化。
- ✅ 正确写法：
<details> <summary>如何安装 Typora？</summary> <p>前往官网下载对应系统安装包，双击运行即可。</p> </details>
- ❌ 错误写法：
<details style="display: block">（语义丢失，键盘焦点和读屏行为异常）
在 summary 中安全使用代码、图标和强调文字
<summary> 只接受 phrasing content（短语级内容），比如纯文本、<code>、<em>、<strong>、内联 SVG，但不能放 <p>、<div>、<h3> 这类块级标签。
立即学习“前端免费学习笔记（深入）”；
浏览器遇到非法嵌套时会自动修复 DOM，可能把块级元素移出 <summary>，导致标题和内容错位，甚至触发两次渲染。
- ✅ 允许：
<summary>运行命令：<code>npm install typora<></code>npm> - ⚠️ 图标注意：SVG 必须设
display: inline，否则可能换行或撑高；不要用<div class="icon">包裹 - ❌ 禁止：
<summary><h4>常见问题</h4></summary>（<h4>是块级，会被浏览器“踢”到外面）
多个 FAQ 项之间互不影响，但无法全局开关
每个 <details> 独立维护自己的 open 状态，这是无脚本环境下的天然隔离。好处是轻量、稳定、无障碍友好；坏处是没法一键“全部展开”或“全部收起”。
CSS 的 :has() 伪类目前（2026 年中）无法修改 HTML 属性，所以像 body:has(.expand-btn:active) details { open: true } 这种写法无效。
- 如果真需要全局控制，必须引入 JS：
document.querySelectorAll('details').forEach(d => d.open = true) - 别用
tabindex给<summary>加手动聚焦——它默认可聚焦，加了反而造成重复 tab 停留 - 收起状态下，内部的
<a>或<input>仍存在于 DOM，键盘 Tab 仍能访问到——这不是 bug，是规范行为；若需真正禁用，得用 JS 控制渲染
键盘与屏幕阅读器的实际表现要点
原生 <details> 支持空格键和回车键切换状态，屏幕阅读器会播报“已展开”或“已折叠”，但有两个易忽略点：
- 内部有
<button>或<input type="checkbox">时，避免把它们放在<summary>里——旧版 Safari 对这类嵌套的事件捕获不稳定 - 某些辅助技术会把收起状态下的内容当作“隐藏但存在”，所以链接仍可被跳转；若 FAQ 内含敏感操作（如删除确认），建议用 JS 动态插入内容而非单纯靠
open控制显隐 - 别给
<summary>加role="button"——它已有内置角色，重复声明可能干扰读屏逻辑
最常被忽略的是：折叠区域里的表单控件，在收起时依然保留在 DOM 中并可被键盘访问。这不是缺陷，而是设计使然——但如果你没意识到这点，就可能在测试时发现“为什么收起了还能按 Tab 到那个按钮”。
