dl 是 dt 和 dd 的唯一合法父容器，二者必须为直接子元素且平级；一个 dt 可对应多个 dd，多个 dt 可共享一个 dd，但需连续；禁用嵌套块级标签，css 应保留语义缩进。
dt 和 dd 必须直接嵌套在 dl 里，不能跳级或错位
浏览器不会报错，但屏幕阅读器会丢失术语与解释的语义关联——比如把 dd 放在 dl 外、或用 div 包一层再塞进 dt，都会让无障碍工具读成“一段普通文字”，而非“这是‘HTTP 状态码’的定义”。
-
dl是唯一合法父容器，所有dt和dd都必须是它的直接子元素 -
dt里禁止放p、div、section等块级标签；允许strong、code、em这类内联元素 -
dd不能包裹dt，dt也不能包裹dd；它们是平级兄弟关系，顺序即逻辑：一个dt后面紧跟着它对应的dd（或多个dd）
一个 dt 对应多个 dd 是完全合法的，别硬塞进一个 dd 里用
分段
比如“闭包”在 JS 和数学中含义不同，或一个参数有“作用”“类型”“默认值”三段说明，直接写多个 dd 更语义清晰，也方便 CSS 单独控制每段样式。
- 错误写法：
<dd> <p>定义</p> <p>示例</p> </dd>—— 屏幕阅读器无法区分段落语义，缩进也容易错乱 - 正确写法：
<dt>timeout</dt> <dd>请求超时时间（毫秒）</dd> <dd>类型：number</dd> <dd>默认值：<code>5000 - 注意：多个
dd之间没有自动间距，需用 CSS 补margin-top或padding-bottom
多个 dt 共享一个 dd 时，dt 必须连续出现，中间不能插 dd
这是表示“同义词共用同一解释”的标准方式，常见于术语表或配置项归类。结构一旦断开，语义就失效。
- 合法：
<dt>HTML</dt> <dt>CSS</dt> <dt>JavaScript</dt> <dd>前端三大基础技术</dd> - 非法：
<dt>HTML</dt> <dd>标记语言</dd> <dt>CSS</dt> <dd>前端三大基础技术</dd>—— 第二个dd会被认为只属于CSS，而非三者共有 - 动态渲染时尤其要注意：从 JSON 拼 HTML 时，得先收集同组术语名，再统一输出
dt块，最后跟一个dd
用 CSS 控制 dd 缩进时，别直接设 margin-left: 0
浏览器默认给 dd 加 margin-left 是为了提供语义暗示（视觉上区分术语与解释），粗暴清零会削弱可访问性线索。
- 推荐做法：重置后显式设置，比如
dd { margin-left: 1.5em; }，既可控又保留缩进意图 - 若想加图标代替缩进，用
dd::before { content: "•"; margin-right: 0.5em; }，比依赖空白更稳定 - 水平对齐需求（如参数表）优先用
display: grid，但 DOM 结构仍必须保持dl > dt, dd的原始顺序，否则读屏器无法配对
dd 前都有且仅有一个未被其他 dd 隔开的 dt。这种结构断裂不会触发 JS 报错，却会让整个列表在语音导航中变成一堆无主的碎片。
