最推荐用<details><summary>组合实现FAQ，因其原生支持展开收起、键盘操作和无障碍访问；<dl>本质是定义列表，缺乏交互能力，需JS补足且语义不符。
用<dl>做FAQ不是最推荐的做法，它适合术语解释类内容，比如“HTML：超文本标记语言”，但不适合问答交互场景。真正语义清晰、可访问、支持展开收起的FAQ结构，应该用<details><summary>组合。
为什么<dl>不太适合FAQ
<dl>本质是“定义列表”，<dt>代表术语（如“缓存是什么？”），<dd>是其解释。但它没有交互能力，不能默认折叠，也不被屏幕阅读器识别为可切换的问题项。用户点击后无法收起，对移动端也不友好。
-
<dl>不支持原生展开/收起，需额外JS控制显隐 - 缺少键盘操作支持（空格/回车无法切换）
- SEO和辅助技术中，它传递的是“术语-定义”关系，而非“问题-答案”逻辑
更合适的FAQ写法：<details><summary>
这是HTML5原生支持的语义化方案，无需JS就能工作，自带焦点、键盘响应和无障碍属性。
- 每个
<details>代表一个FAQ条目，建议加id便于URL锚点跳转（如id="q1"） -
<summary>自动获得role="button"，支持空格/回车触发切换 - 内部可放任意HTML内容（段落、链接、代码块等），比
<dd>更灵活
示例：
立即学习“前端免费学习笔记（深入）”；
<details id="q1"><summary>网页加载慢怎么办？</summary>
<p>检查图片是否过大，启用浏览器缓存，减少HTTP请求数量。</p>
</details>
如果必须用<dl>，怎么让它接近FAQ效果
仅限简单静态页面或兼容老旧系统时降级使用，需配合少量CSS和JS补足功能：
- 给每个
<dt>加tabindex="0"并监听keydown事件模拟按钮行为 - 用
aria-expanded和hidden手动管理显隐状态 - 避免嵌套
<dl>——FAQ通常不需要多层术语嵌套
注意：<dl>里<dt>和<dd>必须成对出现，且<dd>不能直接放在<dl>外。
小结：选对标签，不只是语法问题
FAQ的核心需求是“可折叠、可聚焦、可跳转、可读取”。<details><summary>天然满足；<dl>需要大量修补才能勉强达标。2026年主流浏览器已全面支持<details>，连iOS Safari和Android Chrome都无兼容性顾虑。
