和是实现语义化、可访问、免js的faq最佳方案，原生支持键盘操作与屏幕阅读器，需确保为首子元素且双标签闭合，配合:target与脚本实现锚点展开，并优化移动端点击热区与视觉断层。
<details></details> 和 <summary></summary> 是当前最直接、最可靠的方案，不需要 JavaScript 就能实现语义正确、可访问、可 SEO 的 FAQ 页面。
为什么不用 JS 或 <dl></dl> 写 FAQ
手写 JS 折叠逻辑容易漏掉 aria-expanded、焦点管理或空格键支持，导致屏幕阅读器无法识别状态变化；<dl></dl> 虽语义清晰，但天生无交互能力，加折叠就得补一堆 ARIA 和脚本，反而增加出错概率。而 <details></details> 浏览器原生支持展开/收起、键盘操作（Tab 进入、Space 切换）、屏幕阅读器播报，Chrome 12+、Firefox 49+、Safari 6.1+、Edge 79+ 全部支持，IE11 是唯一例外——但如今已无必要兼容。
<summary></summary> 必须是 <details></details> 的第一个子元素
这是最容易翻车的点：如果中间插了空格、注释、<p></p> 或 <h3></h3>，点击就失效。常见错误写法：<details><p><summary>Q: …</summary></p>
<p>A: …</p></details> —— 这里 <p></p> 挡在了 <summary></summary> 前面，折叠功能直接挂掉。
- 正确结构必须是：
<details><summary>问题文本</summary><p>答案内容</p></details> -
<summary></summary>必须双标签，不能写成自闭合形式（如<summary></summary>） - 避免在
<summary></summary>内包裹块级元素（<div>、<code><h3></h3>），可用<strong></strong>或<span></span>替代如何让 URL 锚点自动展开对应 FAQ
用户从邮件或搜索结果点进
faq.html#forgot-password，浏览器默认只滚动，不展开。要让它生效，得靠两层保障：- 每个
<details></details>加唯一id，例如<details id="forgot-password"></details> - CSS 中写
details:target { open: true; }（注意：Safari 15.4+ 才完全支持该规则的open设置） - 为兜底兼容旧 Safari，加一行极简脚本（非必需但推荐）：
const id = location.hash.slice(1);<br>const el = document.getElementById(id);<br>if (el && el.tagName === 'DETAILS') el.open = true;
ID 值不能含空格或中文标点；若需从中文标题生成 ID，建议转小写拼音或用
encodeURIComponent()处理后再截取。移动端点击区域小、误触收起怎么修
原生
<summary></summary>默认热区只覆盖文字本身，手机上一点就偏，滑动时还容易误触发收起。这不是 bug，是浏览器设计如此——它把整个<summary></summary>元素当按钮，但默认padding和line-height太小。- 给
<summary></summary>加padding: 12px 16px，并设cursor: pointer明确提示可交互 - 加
user-select: none防止长按选中干扰操作（不影响屏幕阅读器） - 绝对不要设
display: block或width: 100%，否则右侧空白处也能触发收起，体验反向恶化 - 记得设
details { scroll-margin-top: 80px; }，否则scrollIntoView()定位后会被固定头部遮住
真正难处理的是“展开后内容不可见”这类视觉断层——比如用了
overflow: hidden在<details></details>上，会裁掉<summary></summary>的下边框或阴影，看起来像断裂了一样。这点常被忽略，但直接影响专业感。 - 每个
