dt 和 dd 必须同为 dl 的直接子元素且平行，不可嵌套；一个 dt 可对应多个 dd，多个 dt 也可共用一个 dd；dd 默认有 margin-top 但非语义换行，清除样式后需手动设置间距；dl 仅适用于定义关系场景，禁用于表格或导航。
dt 和 dd 必须同级，不能嵌套
很多人写错成 <dt>CPU</dt><dd><dt>主频</dt><dd>3.2GHz</dd></dd>，这是非法结构。HTML 规范明确要求 <dt> 和 <dd> 都是 <dl> 的直接子元素，彼此平行，不存在父子关系。
常见错误现象包括：浏览器渲染异常、无障碍阅读器读不出描述、CSS 选择器失效（比如 dt + dd 不触发）。
-
<dl>内只允许出现<dt>和<dd>，不能有<p>、<div>等包裹 - 一个
<dt>可以对应多个<dd>（如多角度解释同一术语） - 多个
<dt>也可共用一个<dd>（如并列术语共享同一说明）
dd 标签不自动换行，但默认有 margin-top
视觉上 <dd> 像是“缩进+换行”，其实是浏览器内置样式给的 margin-top: 0.61em 和 margin-bottom: 0.61em，不是语义换行。如果你清除了所有默认样式（比如用了 reset.css），<dd> 会紧贴 <dt> 显示，甚至重叠。
使用场景中要注意：做响应式术语表、FAQ 折叠面板时，别只靠默认 margin 控制间距；用 Flex 或 Grid 布局时，<dd> 的 margin 可能干扰对齐。
立即学习“前端免费学习笔记（深入）”；
- 检查是否被 CSS 重置影响：用浏览器开发者工具看 computed
margin-top - 需要精确控制时，显式设置
dd { margin: 0.5em 0; }比依赖默认值更可靠 - 若用
display: flex包裹<dl>，记得dd的 margin 不会自动参与 flex 分布
多个 dd 对应一个 dt 是合法且常用
比如解释“HTTP”时，可能需要分别说明协议类型、端口、状态码机制——这三个都该用独立的 <dd>，而不是塞进一个 <dd> 里用 <br> 分隔。这样既利于语义化，也方便后续用 JS 单独操作某条解释，或让屏幕阅读器逐条朗读。
错误做法是把多条描述硬塞进单个 <dd>：<dd>应用层协议<br>默认端口80<br>基于请求-响应模型</dd>。这破坏了可访问性与结构化数据提取能力。
- 搜索引擎和知识图谱更倾向从多个
<dd>中抽取结构化字段 - WCAG 要求每条描述语义独立，避免用
<br>模拟列表 - Vue/React 中映射数组生成定义列表时，确保每个描述项生成独立
<dd>
dl/dt/dd 不适合模拟表格或菜单导航
有人用 <dl> 实现“左侧标签 + 右侧值”的两栏布局，或者当垂直菜单用，这是误用。虽然能显示，但语义断裂：没有“定义关系”的内容强行套用定义列表，会让辅助技术困惑，也影响 SEO 权重分配。
典型反例：<dl><dt>用户名</dt><dd>admin</dd><dt>邮箱</dt><dd>user@example.com</dd></dl> —— 这本质是键值对表单数据，应该用 <table>（带 role="grid"）或语义化 <form> + <label>。
- 真正适合
<dl>的场景：词汇表、API 参数说明、FAQ、产品特性对比（强调“是什么”而非“值是多少”） - 如果内容需排序、筛选、导出为 CSV，
<dl>无法提供行列语义支撑 - 移动端双栏排版建议用 CSS Grid，而非依赖
<dt>的默认 bold +<dd>的缩进
最常被忽略的是：dt 和 dd 的配对逻辑必须由人来维护，HTML 解析器不会校验它们是否成对。写漏一个 <dd>，或错位嵌套，页面照样渲染，但语义已损坏——这种问题在自动化测试和无障碍审计中才暴露出来。
