details 内部放一个 summary 标签作为标题，其余内容点击标题后展开。open 属性表示初始展开状态，也可以在 JS 里直接读写。默认样式带一个小三角箭头，可以用 list-style:none 或对 ::marker/::-webkit-details-marker 做样式覆盖。_FAQ 场景下它几乎是零成本方案：不用维护任何展开状态变量。
与 JS 手写折叠相比，details 的优势是状态内建、键盘可操作、无 JS 也能运行，对无障碍工具天然友好。局限是动画要靠 JS 或新特性配合实现，多级嵌套时样式控制相对繁琐。SEO 方面，Google 明确抓取 details 内容作为常见问题的富摘要来源，写 FAQ 时顺手用它能多吃一波搜索流量。
<style> details.panel { border: 1px solid #4a9eff; border-radius: 8px; margin-bottom: 8px; padding: 8px 12px; } details.panel summary { cursor: pointer; font-weight: bold; color: #4a9eff; } details.panel summary::-webkit-details-marker { color: #e78a3e; } </style> <details class="panel" open> <summary>什么是 HTML？（默认展开）</summary> <p>超文本标记语言，用来描述网页结构的标记语言。</p> </details> <details class="panel"> <summary>什么是 CSS？</summary> <p>层叠样式表，负责网页的视觉表现层。</p> </details> <details class="panel"> <summary>什么是 JavaScript？</summary> <p>运行在浏览器里的脚本语言，负责交互逻辑。</p> </details>