dt和dd必须直接嵌套在dl内，不可孤立或跨级使用；浏览器会忽略脱离dl的dt/dd，导致语义丢失、读屏器无法识别定义关系、css选择器失效；正确结构唯一：dl为外层容器，其直接子元素仅限dt和dd。
dt 和 dd 必须直接嵌套在 dl 里，不能跨级或孤立使用
浏览器会忽略脱离 dl 的 dt 或 dd，它们不是独立语义标签。常见错误是把 dt 当成普通标题、dd 当成段落随意丢在 div 里——这时语义丢失，屏幕阅读器无法识别定义关系，CSS 选择器如 dl > dt 也会失效。
正确结构只有一种：最外层必须是 dl，内部只能直接包含 dt 和 dd（顺序不限，但建议 dt 在前）。例如：
- HTTP
- 超文本传输协议，用于客户端与服务端通信。
- HTTPS
- HTTP 的安全版本，通过 TLS 加密传输。
-
dt可连续多个（比如一个术语有多个同义名称），之后跟一个dd解释 -
dd也可多个（比如一个术语对应多个解释点），每个都属于前面最近的dt - 不要用
dl替代ul或ol做纯列表——它不表示项目顺序或层级，只表达「术语–定义」对
dl 不支持 aria-label，但可用 aria-labelledby 关联外部标题
给 dl 直接加 aria-label="参数说明" 是无效的，多数屏幕阅读器会跳过。真正生效的方式是：把标题单独写出，再用 aria-labelledby 指向它。
例如：
<h3 id="param-list">API 参数说明</h3>
- timeout
- 请求超时时间，单位毫秒，默认 5000。
- 若无视觉标题，可添加隐藏的
<span class="visually-hidden">参数说明</span>并用id关联 -
role="list"或role="definition"不必要，dl原生已有明确语义角色 - 避免给
dt或dd单独加aria-label——这会覆盖其真实文本，反而破坏可访问性
dt 和 dd 的默认样式差异容易引发布局错位
不同浏览器对 dt 和 dd 的默认 margin、padding、display 处理不一致。典型问题是：dd 缩进过大、换行后与 dt 对不齐、多行 dd 顶部留白异常。
稳妥做法是显式重置并统一控制：
dl {
margin: 0;
}
dt {
font-weight: bold;
margin: 0.5em 0 0.25em;
}
dd {
margin: 0 0 1em 0;
padding-left: 0;
}
- 不要依赖
dd的默认缩进做排版——它在 Safari 和旧 Edge 中可能为 40px，在 Firefox 中是 40px 左侧 margin，但行为不稳定 - 若需
dt和dd水平排列（如表格式布局），改用display: grid或flex更可靠，而非浮动或负 margin - 设置
dd::before添加图标时，注意它会干扰语音朗读顺序，优先用背景图或伪元素 +aria-hidden="true"
嵌套 dl 是合法且有用的，但需谨慎控制深度
HTML 标准允许 dl 嵌套，比如在某个 dd 里再放一组术语定义（常见于技术文档中的“参数类型”展开说明）。但超过两层嵌套会让语义迅速模糊，可访问性和维护性下降。
示例（合理一层嵌套）：
请求头对象，键值对形式。
- Content-Type
- 指定资源类型，如
application/json。
- 嵌套
dl应有明确上下文边界（比如用p或div包裹说明文字），避免直接裸嵌 - 不要在
dt内部嵌dl——dt只应包含短语或单词，嵌套会破坏术语的简洁性 - 自动化工具（如 linter、SEO 分析器）通常不检查嵌套深度，但人工 review 时容易漏掉内层
dt/dd的语义一致性
dd 的 margin-left，却忘了同步调整 dt 的 margin-bottom，导致术语和定义之间出现奇怪的空隙；或者用了 aria-label 在 dl 上，结果测试时发现 NVDA 完全没读出标题——那大概率就是这个坑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
