使用 <dl> 标签构建 FAQ 页面语义最恰当，<dt> 表示问题、<dd> 表示答案，天然契合问答关系；需确保结构准确、可访问性强，并通过 CSS 和 ID 锚点支持折叠展开与搜索定位。
用 <dl> 标签构建 FAQ 页面，是语义最恰当、结构最清晰的方式——它天然表达“术语与定义”的对应关系，而每个问题（<dt>）和答案（<dd>）正好构成一对问答。
语义结构要准确：一个问题配一个定义块
<dl> 不是普通列表，不能混用 <li>。每个问题必须用 <dt>（definition term），紧随其后的答案必须用 <dd>（definition description）。多个答案可共用一个 <dt>，但一个 <dd> 不能跨多个 <dt>。
正确写法示例：
<dt>网页打不开怎么办？</dt>
<dd>请检查网络连接，确认 URL 输入正确，或尝试刷新页面。</dd>
<dt>支持哪些浏览器？</dt>
<dd>推荐使用 Chrome、Firefox、Edge 最新版。</dd>
</dl>
增强可访问性：为屏幕阅读器提供明确上下文
辅助技术能自动识别 <dl> 中的问答关系，但需确保：
- 每个 <dt> 内容简洁明确，避免模糊表述（如“常见问题”这种标题不要作为 <dt>）；
- <dd> 内容完整独立，不依赖前文理解；
- 可选添加 aria-label 或 aria-labelledby 进一步绑定问答关联（尤其当答案含复杂结构时）。
样式控制更灵活：按需组合 CSS 选择器
利用 <dl> 的嵌套特性，可轻松实现折叠/展开、悬停高亮、间距分隔等效果：
立即学习“前端免费学习笔记（深入）”；
- 给
<dt>加cursor: pointer和font-weight: bold，视觉上突出问题； - 用
dl dd + dt选择器在相邻问题间加顶部边距，形成自然分隔； - 配合 JavaScript 控制
<dd>的max-height和overflow，实现平滑展开动画。
进阶优化：支持搜索定位与锚点跳转
为每个 <dt> 添加唯一 id（如 id="q-network"），再让问题文本包裹在 <a> 中指向自身，就能支持 URL 锚点直达（例如 #q-network）和站内搜索结果跳转。同时，配合 scroll-margin-top 防止标题被固定导航栏遮挡。
