和 是标准答案，无需 JS 即可实现语义正确、无障碍友好的 FAQ 折叠，原生支持状态管理、键盘交互与屏幕阅读器识别，但需避免自闭合错误、嵌套不当及冗余 ARIA 设置。
<details></details> 和 <summary></summary> 就是标准答案，不用 JS 也能做 FAQ 折叠——只要不需要动画、不需强制单开、不依赖 IE，它就是最轻量、语义正确、无障碍友好的选择。
为什么直接用 <details></details> 而不是手写 JS 折叠逻辑
原生标签自动处理展开/收起状态、键盘交互（Tab 进入、Space 展开）、ARIA 属性注入（如 aria-expanded），连屏幕阅读器都默认识别。手写 JS 容易漏掉焦点管理、role 设置或键盘事件，反而降低可访问性。
常见错误现象：
-
<summary></summary>写成自闭合标签（<summary></summary>），内容完全不显示 - 把
<summary></summary>套在<h3></h3>或<div> 里，导致点击失效或样式错乱 <li>给 <code><summary></summary>加tabindex或role="button"，覆盖原生语义，破坏读屏支持
<details></details> 的 open 属性和锚点展开怎么配
默认展开第一个 FAQ？只给对应 <details></details> 加 open 属性：<details open></details>。注意不是 opened，也不是字符串 open="true"，它是布尔属性，有即真。
立即学习“前端免费学习笔记（深入）”；
想通过 URL 锚点（比如 #faq-3）自动展开某一条？用 CSS 的 :target 伪类：
details:target { open: true; }
但必须确保目标元素是 <details id="faq-3"></details>，且页面加载后浏览器能定位到它。实操要点：
- 先设
element.open = true，再调用scrollIntoView()，否则 Safari 可能不触发展开 - 滚动定位推荐配置：
{ block: 'nearest', inline: 'start' } - 加
scroll-margin-top: 60px补偿固定头部遮挡
清除默认箭头和控制间距的 CSS 注意点
不同浏览器渲染原生箭头方式不一：Chrome/Firefox 支持 summary::marker，Safari 基本忽略。安全做法是统一清除再自定义：
summary { list-style: none; }
summary::marker { content: ""; }
summary::after { content: "▼"; font-size: 12px; margin-left: 8px; }
容易被忽略的细节：
-
<details></details>默认有上下外边距（margin-block），多条 FAQ 并列时空白过大，建议显式设为margin-block: 0.5em - 不要用
display: block或float破坏<summary></summary>的内联行为，否则点击区域收缩 - 若答案区含链接或表单，用户用键盘展开后焦点不会自动跳入内容——这是规范行为，别强行干预；但得确保内容本身可 tab 到达
SEO 和结构化数据必须配套做
纯 <details></details> 页面 Google 能正常索引所有文本，但不会在搜索结果中显示折叠卡片（FAQ rich result）。要触发富文本，必须加 JSON-LD 结构化数据：
关键约束：
-
@context、@type: "FAQPage"、mainEntity数组缺一不可 - 每个
mainEntity的name和acceptedAnswer.text必须和页面上可见的<summary></summary>文本、<details></details>内容**逐字一致**——空格、换行、标点差一个都会失败 -
<script type="application/ld+json"></script>必须放在或页面顶部，不能塞在底部
最常卡住的地方是：开发者写了结构化数据，但页面上用了省略号、加粗标签或换行符，而 JSON-LD 里是纯一行文本——Google 比对失败，富文本就永远不出。
