应使用标记名词-解释映射关系，如api参数、词典条目、技能项；禁用其做布局、步骤列表或语义不清的多对多结构。
直接用 <dl></dl> 包裹一组 <dt></dt>（术语）和 <dd></dd>（定义），不需要额外 wrapper 或 class 就能语义正确，但浏览器默认样式简陋，实际项目中几乎总要重置或增强。
什么时候该用 <dl></dl> 而不是 <ul></ul> 或表格
<dl></dl> 的核心语义是「名词-解释」的映射关系，不是列表也不是网格。比如 API 文档里的参数说明、词典条目、简历中的技能项——这些内容天然成对，且顺序不重要、数量不固定。
常见误用：
– 用 <dl></dl> 做横向两栏布局（该用 CSS Grid/Flex）
– 把纯步骤流程（1. 开始 → 2. 执行 → 3. 结束）塞进 <dt>/</dt>
<dd></dd>（该用 <ol></ol>）
– 为每个 <dt></dt> 配多个 <dd></dd> 却不加语义分组（允许，但需确保逻辑清晰）
-
<dt></dt>可以连续写多个，表示同一术语的多种写法（如<dt>src</dt> <dt>data-src</dt>） -
<dd></dd>可以紧跟在任意<dt></dt>后，也可以跨多个<dt></dt>归属（浏览器自动关联最近的前置<dt></dt>） - 不能把
<dt></dt>或<dd></dd>单独丢在<dl></dl>外面，否则 HTML 验证失败
<dt></dt> 和 <dd></dd> 的默认样式问题
所有浏览器都给 <dd></dd> 加了左边缩进（通常是 40px），<dt></dt> 默认无 margin/padding，且字体不加粗。这导致视觉上「术语」和「解释」区分弱，尤其多行 <dd></dd> 时容易错位。
最简修复方式：
dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.25em 1em;
}
dt {
font-weight: 600;
margin-bottom: 0.25em;
}
dd {
margin: 0;
grid-column: 2;
}
注意：grid-column: 2 确保每个 <dd></dd> 都落在第二列，避免因 <dt></dt> 换行导致错行。
可访问性与嵌套注意事项
屏幕阅读器会明确读出「term：xxx」、「definition：yyy」，所以 <dt></dt> 内容必须是简洁名词性短语，别塞完整句子或操作按钮。
- 不要在
<dt></dt>里放<button></button>或<a></a>—— 语义冲突，改用<dd></dd>包裹操作控件 - 可以嵌套
<dl></dl>（比如某个<dd></dd>内再描述子属性），但层级建议 ≤2 层，否则导航成本高 - 如果某项定义需要强调状态（如「已弃用」「实验性」），用
<span aria-label="deprecated"></span>比纯 CSS 标记更可靠
真正难的是让设计稿里的「看起来像定义列表」和语义上的「确实是定义关系」对齐——很多人删掉 <dl></dl> 改用 <div> 布局，只因懒得理清哪部分是 term、哪部分算 definition。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
