index.html中的折叠式常见问题（FAQ）列表：HTML交互文档设计-html教程-PHP中文网

summary点击没反应是因为它必须嵌套在details标签内且为第一个唯一子元素，单独使用无效；需加padding和cursor提升移动端体验；seo需添加faqpage json-ld结构化数据。

index.html中的折叠式常见问题（faq）列表：html交互文档设计

为什么`summary`点击没反应？检查是否漏了`details`包裹

单独写<summary></summary>不会有任何交互行为，它必须嵌套在<details></details>里才生效。浏览器只识别<details></details>为可折叠容器，<summary></summary>只是它的控制标题——不是独立组件。

<summary></summary>必须是<details></details>的**第一个且唯一子元素**，中间不能插空格、注释、<p></p>或<h3></h3>
错误写法：<details><div><summary>Q?</summary></div> <p>A</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件</a> <p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></details> → 点击失效
正确写法：<details><summary>Q?</summary><p>A</p></details>
<summary></summary>必须双标签闭合，<summary></summary>会导致内容完全不显示

移动端点不准、划动误收起：给`summary`加热区和交互提示

原生<summary></summary>默认点击区域只覆盖文字本身，手机上容易点空或滑动时意外触发收起。这不是 bug，是浏览器把<summary></summary>当作内联元素处理的结果。

加padding: 12px 16px扩大可点击区域，同时设cursor: pointer明确提示可交互
加user-select: none防止长按选中文本干扰操作（不影响屏幕阅读器）
避免display: block或width: 100%——会撑满父容器，导致右侧空白也能触发收起
多条 FAQ 并列时，默认<details></details>有margin-block，建议显式设为margin-block: 0.5em控制间距

`details:target`锚点展开失效？优先用 JS 补漏而非纯 CSS

details:target { open: true; }在 Safari 15.4+ 才能可靠生效，旧版 Safari 和部分 WebView（如微信内置浏览器）会忽略该规则。纯 CSS 方案不可靠。

推荐做法：页面加载后用极简 JS 检查 URL hash，找到对应<details id="xxx"></details>，先设element.open = true，再调用scrollIntoView()
必须分两步：如果先滚动再展开，scrollIntoView()会按收起状态的高度计算位置，结果卡在顶部下方一截
滚动参数推荐：{ block: 'nearest', inline: 'start', behavior: 'smooth' }
提前设details { scroll-margin-top: 80px; }补偿固定 header 高度，否则目标被遮挡

SEO 富文本卡片不出现在 Google？缺了`FAQPage` JSON-LD

无论你用<details></details>写得多标准，Google 都不会自动识别为 FAQ 结构。它只认结构化数据，不是语义标签。

必须在或页面顶部添加<script type="application/ld+json"></script>
字段必填：@context、@type: "FAQPage"、mainEntity数组，每项含@type: "Question"、name、acceptedAnswer
name和acceptedAnswer.text必须与页面可见文本**逐字一致**——标点、空格、换行都不能差
不支持 IE 的项目无需 polyfill，但若仍需兼容 IE11，则必须降级为手动管理aria-expanded + hidden属性