dl 仅适用于“术语–定义”语义的 faq，如状态码、技术名词等；含疑问句、操作步骤或交互元素的内容应改用 article 或 section。
dl 不适合直接套用“Q: … A: …”式 FAQ，强行用会破坏语义、干扰屏幕阅读器、降低 SEO 效果。真正能用 dl 的 FAQ，必须满足“术语–定义”这一核心语义关系。
为什么 FAQ 页面不能随便套 dt/dd
浏览器和读屏器把 dt 当作名词性术语（如“404 Not Found”“JWT”），不是疑问句。如果你写 <dt>为什么登录不了？</dt>，读屏器会读成“term: 为什么登录不了？”，听起来像在念一个奇怪的专有名词，而非问题。
- 搜索引擎无法识别这是问答对，只当普通文本处理
- CSS 加
dt::before { content: "Q: "; }是视觉补丁，解决不了底层语义错位 - 带操作步骤、条件分支、按钮链接的问题（比如“重试三次还不行怎么办？”）天然不适合
dd容纳
哪些 FAQ 内容才真正适合 dl
只有那些本身是标准术语、配置项、状态码或功能名称的问题，才配得上 dt。它们后面跟的是官方定义、行为说明，不是操作指南。
<dt>401 Unauthorized</dt> <dd>请求缺少有效认证信息，服务器拒绝处理。</dd><dt>启用自动同步</dt> <dd>客户端定时向服务端拉取最新数据，无需手动刷新。</dd><dt>JWT</dt> <dd>JSON Web Token，RFC 7519 标准定义的声明式令牌格式。</dd>
样式塌陷和换行错位怎么快速修
现代 CSS 重置常清空 dd 的默认 margin-left，导致术语和解释挤成一行；多 dd 连续时又容易粘连下一个 dt。
- 最简修复：
dd { margin-left: 1.5em; }——不依赖 flex/grid，兼容所有浏览器 - 防粘连：
dd { margin-top: 0.25em; margin-bottom: 0.5em; } - 若需左右对齐（术语左、解释右）：
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 1em; } dt { grid-column: 1; } dd { grid-column: 2; }，漏掉任一规则都可能错列
多个含义或共用解释怎么组织
dt 和 dd 支持一对多、多对一，但逻辑必须清晰。
- 一词多义：一个
dt后接多个dd，每段都是该术语在不同上下文中的正确定义<dt>闭包</dt> <dd>JavaScript 中函数与其词法环境的组合。</dd> <dd>数学中集合在运算下保持封闭的性质。</dd> - 多词一义：多个
dt紧连，再跟一个dd，表示这些术语共享同一概念<dt>HTML</dt> <dt>CSS</dt> <dt>JavaScript</dt> <dd>构成现代网页开发的三大基础技术。</dd>
最容易被忽略的是：dt 必须是名词性短语，不能含问号、动词结构或操作指令；dd 里别塞跳转链接、按钮或步骤编号——那已经超出“定义”的范畴，该换 article + details 或语义化 section 了。
