dt 和 dd 必须包裹在 dl 中，否则语义失效；一个 dt 可对应多个 dd，但 dd 不能悬空或跨 dt 共享；需重置默认样式并添加 aria 属性与 JS 交互以满足无障碍要求。
dt 和 dd 必须包裹在 dl 中，否则语义失效
单独写 <dt> 或 <dd> 标签浏览器不会报错，但会丢失结构语义，屏幕阅读器无法识别为问答对，SEO 也几乎不识别。必须用 <dl> 作为容器，且 <dt> 和 <dd> 要成对嵌套在其中。
-
<dl>是定义列表（definition list）的唯一合法父元素，不是可选的“装饰”标签 - 一个
<dt>可对应多个<dd>（比如一个问题带多条解释），但一个<dd>不能悬空在<dl>外 - 常见错误：把
<dt>当成<h3>用、或用<div>替代<dl>—— 这会让辅助技术完全忽略问答关系
多个问题共用同一答案时，dt 可重复，但 dd 不能跨 dt 共享
HTML 规范不允许一个 <dd> 同时属于多个 <dt>。如果两个问题指向同一段解释，必须复制一份 <dd>，或改用 JavaScript 动态展开/收起逻辑，而不是靠 DOM 结构“偷懒”。
- 错误写法：
<dt>Q1</dt><dt>Q2</dt><dd>同一答案</dd>—— 浏览器解析时会把第二个<dt>视为无<dd>的孤立项 - 正确做法：每个
<dt>后紧跟它自己的<dd>，哪怕内容相同 - 若答案很长且重复多，建议用 CSS 类名统一控制样式，而非合并 DOM 节点
样式重置比想象中更关键：浏览器默认有 margin 和缩进
不同浏览器对 <dl>、<dt>、<dd> 的默认 margin 差异很大，特别是 <dd> 默认带左侧缩进（40px 左右），直接导致 FAQ 排版错乱。
- 必须重置：
dl, dt, dd { margin: 0; padding: 0; }，再按需添加间距 -
<dt>默认不加粗、无特殊字体，常需手动设font-weight: bold或cursor: pointer - 移动端要注意
<dd>内部段落（<p>）的 margin 会叠加，容易撑开过大间隙
无障碍支持依赖正确的 aria 属性和焦点管理
仅靠 <dl> 结构不足以满足 WCAG 2.1，用户无法键盘操作展开/收起，屏幕阅读器也无法播报“已展开/已折叠”状态。
立即学习“前端免费学习笔记（深入）”；
- 给每个
<dt>加tabindex="0"和role="button"，使其可聚焦、可按键触发 - 用
aria-expanded="true/false"控制状态，并配合aria-controls="id-of-dd"关联对应<dd> -
<dd>需设id与aria-controls值一致，且初始隐藏时加hidden或aria-hidden="true"
复杂点在于：纯 HTML 无法实现交互，必须配 JS 控制显隐和属性切换；而很多人只写结构、不补逻辑，结果对键盘用户和读屏软件完全不可用。
