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