专用于名-值对语义结构，必须成套使用 和 ；不可作布局容器，否则损害可访问性、seo 与语义准确性。
直接用 <dl></dl> 包裹 <dt></dt> 和 <dd></dd>，三者必须成套出现，不能单独使用 —— 这是语义正确的唯一方式。
为什么不能把 <dl></dl> 当作普通布局容器用
浏览器默认会给 <dd></dd> 加左侧缩进（通常 40px），但这是样式表现，不是结构意义；如果只是想实现“左标题右内容”的两栏排版，用 <dl></dl> 反而增加语义负担。它专为“名-值对”设计，比如产品参数、FAQ、元数据，不是为了替代 <div> 或 CSS Grid。<ul>
<li>滥用会导致屏幕阅读器误读，把普通文案当成术语解释</li>
<li>SEO 工具可能提取 <code><dt></dt> 作为关键词，但若内容不匹配，反而稀释页面主题
<dd></dd> 的语义线索就完全丢失了，不如直接用 <dl></dl> + <dt></dt> + <dd></dd> 配合 display: grid
<dt></dt> 和 <dd></dd> 的配对规则很灵活，但有硬约束
<dt></dt> 必须出现在 <dl></dl> 内部，且每个 <dt></dt> 后面至少要跟一个 <dd></dd>；反过来，<dd></dd> 前面不一定紧挨着 <dt></dt>，但它逻辑上属于最近的前一个 <dt></dt>。
- 一个
<dt></dt>可以对应多个<dd></dd>（比如一个术语有多个角度的解释） - 多个
<dt></dt>可以共用一个<dd></dd>（比如多个同义词共享同一定义） - 不允许出现孤立的
<dd></dd>（即前面没有<dt></dt>），HTML 验证器会报错 -
<dt></dt>里不能嵌套<h1></h1>~<h6></h6>，否则破坏语义层级
常见错误：把 <dl></dl> 当成无序列表写
比如这样写是错的：
- 苹果
- 香蕉
- 橙子
缺少 <dt></dt>，浏览器虽能渲染，但语义断裂 —— 它不再表示“术语与解释”，而是一堆无主的描述项。正确写法必须明确谁是“名”，谁是“值”：
- 水果种类
- 苹果
- 香蕉
- 橙子
- 如果真只需要列几个名词，用
<ul></ul>更合适 - 如果每个名词都需要独立解释，那就每个都配
<dt></dt>+<dd></dd> - 别为了省代码少写
<dt></dt>，那是拿语义换便利，后期维护和可访问性都会出问题
CSS 控制 <dd></dd> 缩进时要注意兼容性
默认缩进靠的是 margin-left，但不同浏览器初始值略有差异（Chrome 是 40px，Firefox 是 2.5em）。重置时建议用 margin-inline-start 而非 margin-left，兼顾 RTL 语言支持。
- 用
display: flex或display: grid替代缩进，更可控也更现代 - 若需水平排列（如规格表），
<dt></dt>设为grid-column: 1，<dd></dd>设为grid-column: 2，比浮动或负 margin 更稳定 - 千万别用
<dl></dl>做多层嵌套菜单 ——<nav></nav>+<ul></ul>才是正确语义路径
最常被忽略的一点：<dl></dl> 不是“自定义列表”，它是“描述列表”，名字就决定了用途边界 —— 凡是不能清晰拆成“名-值”关系的内容，都不该塞进去。
