HTML怎么做FAQ页面_html常见问题页面布局方法【经验分享】-html教程-PHP中文网

使用和可实现语义正确、无障碍友好、无需 js 的 faq 折叠效果，现代浏览器原生支持，ie11 需降级为 aria-expanded + hidden 方案，并配合 faqpage json-ld 结构化数据以支持搜索引擎富文本展示。

html怎么做faq页面_html常见问题页面布局方法【经验分享】

用 `<details></details>` 和 `<summary></summary>` 实现可折叠 FAQ，无需 JS

现代浏览器（Chrome 12+、Firefox 49+、Safari 6.1+）原生支持 <details></details>，这是最轻量、语义正确、无障碍友好的 FAQ 实现方式。它自动处理展开/收起状态、键盘焦点和屏幕阅读器播报，比手写 JS + ARIA 更可靠。

常见错误是给 <summary></summary> 加 onclick 或强行用 <div> 模拟，结果破坏语义、无法用空格键触发、手机点不灵。 <ul> <li> <code><summary></summary> 内容会自动成为折叠标题，点击即切换；不要额外套 <button></button>

默认展开用 open 属性：<details open></details>

样式控制靠 CSS：用 details[open] > summary::after 改箭头，避免用 JS 切类名

不支持 IE，若需兼容 IE11，必须降级为 JS 方案（见下一条）

IE11 兼容方案：用 `classList.toggle()` + `aria-expanded`

当项目仍需支持 IE11 时，<details></details> 失效，得手动控制显隐和可访问性属性。核心不是“怎么让内容显示”，而是“怎么让屏幕阅读器知道状态变了”。

典型翻车点：只改 display 或 height，却忘了同步更新 aria-expanded="true/false" 和 aria-controls，导致视障用户完全不知道答案区已展开。

HTML 结构保持语义：

<button aria-expanded="false" aria-controls="faq-1-answer">Q: …</button><div id="faq-1-answer" hidden>A: …</div>

JS 只做两件事：切 aria-expanded 值、切 <code>hidden 属性（或用 classList.toggle() 控制自定义类）
避免用 slideUp/slideDown —— jQuery 动画在 IE11 中可能卡顿且不触发 transitionend
如果用 CSS 过渡，确保过渡属性只写 max-height 或 opacity，别碰 display（它不可动画）

SEO 和结构化数据：加 `FAQPage` JSON-LD 才能出富文本摘要

光把 FAQ 做出来，搜索引擎不一定识别。要让它在 Google 搜索结果里以折叠卡片形式展示，必须注入结构化数据。纯 HTML 标签（哪怕用了 <details></details>）本身不被 Google 当作 FAQ 结构识别。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

容易忽略的是：JSON-LD 必须放在或页面顶部的 <script type="application/ld+json"></script> 里，且每个 mainEntity 的 name 和 acceptedAnswer.text 要和页面可见文本严格一致——有空格、标点、换行差异都会导致富文本失败。

字段必填：@context、@type: "FAQPage"、mainEntity 数组，每项含 @type: "Question"、name、acceptedAnswer
不要把整个 FAQ 列表塞进一个 text 字段里；每个问题/答案必须单独成对象
用 Google Rich Results Test 实时验证，别只信本地预览

移动端适配关键：禁用 `user-select: none`，慎用 `touch-action: manipulation`

在 iOS Safari 上，如果给 <summary></summary> 或 FAQ 按钮加了 user-select: none，会导致第一次点击无响应——这是 Safari 的已知 bug（iOS 15–16 尤其明显）。同样，滥用 touch-action: manipulation 可能屏蔽双击缩放，影响阅读体验。