dl标签专用于“术语—解释”语义关系，如参数名与说明，禁用作表格或布局；必须成对使用dt与dd，支持嵌套但需结构严谨，否则破坏可访问性与seo。
dl 标签不是表格，别当 <table> 用
<p>很多人一看到“对照表”就下意识套表格结构，但 <code><dl></dl> 的语义是“定义列表”，天然对应“术语—解释”关系，比如文档中常见的“参数名—说明”“属性名—取值范围”。它不带行列概念，没有 <tr><code><td>，强行塞进格子感布局反而破坏可访问性和语义。屏幕阅读器会把 <code><dt></dt> 读作“术语”，<dd></dd> 读作“定义”，这对无障碍支持很关键。
必须成对出现：每个 <dt></dt> 至少配一个 <dd></dd>
<dt></dt> 至少配一个 <dd></dd>
常见错误是漏掉 <dd></dd>，或者把多个 <dt></dt> 连写没跟定义——浏览器虽能渲染，但校验工具（如 W3C Validator）会报错，且会影响 SEO 和辅助技术理解。正确结构只有一种：
- color
- 文本颜色，支持 hex、rgb、named color
- font-size
- 字体大小，单位可为 px、em、rem
-
<dt></dt>内容不能为空；空<dt></dt>是无效标记 - 一个
<dt></dt>可对应多个<dd></dd>（比如一个属性有多个取值示例） - 多个
<dt></dt>可共享一个<dd></dd>（比如 alias 属性共用同一说明）
样式控制靠 CSS，别依赖默认缩进
浏览器对 <dl></dl> 的默认样式差异大：Chrome 默认 <dd></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></dl> 是合法且推荐的
当某个属性值本身是键值对（如 CSS background 的 shorthand 解析），直接写文字会难读。W3C 明确允许 <dl></dl> 嵌套 —— 这比塞 <pre class="brush:php;toolbar:false;"></pre> 或硬换行更语义化：
- color
- #333
- image
- url(./bg.png)
- repeat
- no-repeat
- 嵌套时外层
<dd></dd>必须存在，不能直接把内层<dl></dl>挂在<dt></dt>后 - 嵌套层级不宜超过两层，否则可维护性下降
- 避免在
<dd></dd>里混用段落、列表等块级元素而不包裹——会导致解析歧义
真正麻烦的是多值同义项（比如 display: flex 和 display: -webkit-flex 都指向同一行为），这时 <dt></dt> 放主名称，<dd></dd> 里用 <ul></ul> 补充别名，而不是硬拆成多个 <dt></dt> —— 语义上它们是同一概念的不同写法，不是独立术语。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
