dl 标签仅适用于术语与解释的成对关系，不可替代 ul/ol 或用于布局；dt 必须紧跟 dd，可一对多但不可多对一；需重置默认样式，禁用 float 和 inline；多值场景用多个 dd 保持语义原子性；勿滥用 ARIA，确保 DOM 顺序与视觉一致。
dl 标签不是用来做普通列表的
很多人看到 dl 就以为是“definition list”（定义列表），顺手拿来当 ul 或 ol 用，结果语义错、样式乱、屏幕阅读器读错。它只适合「术语 + 解释」这类成对关系，比如词汇表、API 参数说明、配置项文档。
常见错误现象：dl 里直接塞 li；或者用 dt 当标题、dd 当内容块，但实际内容之间没有定义关系——这会让辅助技术把 dt 误读为“可点击术语”，而用户根本没在查词典。
-
dt必须紧跟dd（或多个dd），不能单独存在，否则 HTML 验证失败 - 一个
dt可对应多个dd（比如一个术语有多个解释），但一个dd不能跨多个dt - 不要用
dl实现横向导航菜单或卡片式布局——CSS Grid / Flex 更合适，也更语义清晰
dt 和 dd 的默认样式与重置要点
浏览器对 dt 默认加粗、缩进；dd 默认带左外边距（约 40px），且上下有空白。这些在现代布局中往往干扰视觉节奏，必须主动重置。
容易踩的坑：只清 margin 却漏掉 padding，或者用 display: inline 破坏语义流——dt 和 dd 是块级元素，强行内联会导致换行异常和可访问性退化。
立即学习“前端免费学习笔记（深入）”；
- 推荐基础重置：
dt, dd { margin: 0; padding: 0; } - 若需水平排列（如键值对表格），用
display: flex包裹dl，再设dt { flex-shrink: 0; }防止文字挤占空间 - 避免用
float布局dt/dd——IE 兼容性差，且脱离文档流后dd容易错位
多值场景下如何合法嵌套 dd
遇到一个术语对应多个不相关的解释（比如 API 字段的“类型”“是否必填”“示例值”），不能写多个 dt，也不能把所有内容塞进一个 dd 里混排。正确做法是：一个 dt 后跟多个 dd，每个 dd 表达独立维度。
示例结构：
<dl> <dt>timeout</dt> <dd><code>number</code></dd> <dd>必填</dd> <dd>单位毫秒，默认 5000</dd> </dl>
- 每个
dd应保持语义原子性：要么全是类型，要么全是约束，不要在一个dd里混写“类型：string，必填：否” - 若需进一步结构化（比如加图标或标签），可在
dd内部用span或small，但别替换dd标签本身 - 注意：多个
dd连续出现时，CSS 选择器dd + dd可用于控制间距，比全局margin-bottom更精准
可访问性陷阱：aria-label 和 role 不要乱加
dl 本身已被主流屏幕阅读器识别为定义列表，无需额外加 role="list" 或 aria-label。强行添加反而可能覆盖原生语义，导致读屏软件重复播报或跳过 dt。
真正需要干预的只有两种情况：内容动态加载后未触发语义更新；或 dl 被 CSS 隐藏但逻辑上仍需保留（此时用 aria-hidden="true" 控制，而非删标签）。
- 禁止写：
<dl role="list">—— 这会告诉读屏软件“这是普通列表”，丢失定义关系 - 如果
dt是图标+文字，确保图标用aria-hidden="true"，文字用dt包裹，不要靠sr-only类补语义 - JavaScript 动态插入
dt/dd后，不用手动触发 ARIA 更新，但需保证插入顺序合法（dt必须在dd前）
复杂点在于：设计稿常把定义列表做成三栏卡片，但 HTML 结构仍是线性 dt→dd→dt→dd。这时候 CSS 布局要兼顾视觉秩序和 DOM 顺序，否则键盘 Tab 顺序会错乱——这点最容易被忽略。
