dl标签专用于“术语—解释”语义关系，如参数名与说明，禁用作表格或布局；必须成对使用dt与dd，支持嵌套但需结构严谨，否则破坏可访问性与SEO。
dl 标签不是表格，别当 <table> 用
很多人一看到“对照表”就下意识套表格结构，但 <dl> 的语义是“定义列表”，天然对应“术语—解释”关系，比如文档中常见的“参数名—说明”“属性名—取值范围”。它不带行列概念，没有 <tr> <td>，强行塞进格子感布局反而破坏可访问性和语义。屏幕阅读器会把 <dt> 读作“术语”，<dd> 读作“定义”，这对无障碍支持很关键。
必须成对出现：每个 <dt> 至少配一个 <dd>
常见错误是漏掉 <dd>，或者把多个 <dt> 连写没跟定义——浏览器虽能渲染，但校验工具（如 W3C Validator）会报错，且会影响 SEO 和辅助技术理解。正确结构只有一种：
<dl> <dt>color</dt> <dd>文本颜色，支持 hex、rgb、named color</dd> <dt>font-size</dt> <dd>字体大小，单位可为 px、em、rem</dd> </dl>
-
<dt>内容不能为空；空<dt></dt>是无效标记 - 一个
<dt>可对应多个<dd>（比如一个属性有多个取值示例） - 多个
<dt>可共享一个<dd>（比如 alias 属性共用同一说明）
样式控制靠 CSS，别依赖默认缩进
浏览器对 <dl> 的默认样式差异大：Chrome 默认 <dd> 左侧缩进，Firefox 则更松散。想实现整齐的“左对齐属性名 + 右对齐值”效果，得手动重置：
dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.25em 1em;
}
dt {
font-weight: 600;
margin: 0;
}
dd {
margin: 0;
justify-self: start;
}
- 避免用
float或display: inline-block模拟两列——易塌陷、响应式差 - 若需支持 IE11，改用
display: table+table-cell，但语义性打折扣 - 移动端建议加
grid-template-columns: 1fr堆叠，否则窄屏下max-content会撑破容器
复杂值怎么办？嵌套 <dl> 是合法且推荐的
当某个属性值本身是键值对（如 CSS background 的 shorthand 解析），直接写文字会难读。W3C 明确允许 <dl> 嵌套 —— 这比塞 <pre> 或硬换行更语义化：
立即学习“前端免费学习笔记（深入）”；
<dt>background</dt>
<dd>
<dl>
<dt>color</dt><dd>#333</dd>
<dt>image</dt><dd>url(./bg.png)</dd>
<dt>repeat</dt><dd>no-repeat</dd>
</dl>
</dd>
- 嵌套时外层
<dd>必须存在，不能直接把内层<dl>挂在<dt>后 - 嵌套层级不宜超过两层，否则可维护性下降
- 避免在
<dd>里混用段落、列表等块级元素而不包裹——会导致解析歧义
真正麻烦的是多值同义项（比如 display: flex 和 display: -webkit-flex 都指向同一行为），这时 <dt> 放主名称，<dd> 里用 <ul> 补充别名，而不是硬拆成多个 <dt> —— 语义上它们是同一概念的不同写法，不是独立术语。
