dl标签专为术语与解释的语义配对设计，适用于api参数、错误码、商品规格等名词性术语加说明的场景，禁用作普通列表、两栏布局或问答页面，否则损害可访问性与seo。
dl 标签不是用来做普通列表的
dl 的语义是“定义列表”（definition list），不是 ul 或 ol 那种通用列表。它专为术语 + 解释的配对结构设计，比如词典条目、API 参数说明、配置项文档。用错语义会导致屏幕阅读器误读、SEO 降权，也影响后续用 CSS 精确控制样式。
常见错误是把 dl 当成“多列布局工具”，硬塞多个 dt 不带 dd，或者把 dd 套在 div 里再塞一堆段落——这会破坏嵌套规则，浏览器可能自动补全或忽略部分标签。
必须成对使用 dt 和 dd，且顺序不能乱
dt（definition term）必须直接包含术语本身，dd（definition description）紧跟其后，解释该术语。一个 dt 可以对应多个 dd（比如同义词或不同角度的解释），但一个 dd 不能跨多个 dt。
-
dt和dd必须都作为dl的直接子元素，不能用div包裹 - 多个
dt连续出现是合法的（如多个同义术语共用一个解释），但后面必须跟至少一个dd - 浏览器对缺失
dd的容忍度低：Chrome 会把后续dt当作新条目，Firefox 可能丢弃无配对的dt
正确示例：
- HTTP
- 超文本传输协议，用于客户端与服务端通信
- HTTPS
- HTTP 的安全版本，基于 TLS 加密
CSS 控制 dl 布局时注意默认缩进和换行
dl 默认没有 margin，但 dd 有左缩进（通常 40px），dt 是 inline-level 行内表现。想实现紧凑排版（如参数表格）、横向术语卡、或响应式双栏，得主动重置。
- 清除
dd缩进：dd { margin-left: 0; } - 让
dt换行并加粗：dt { display: block; font-weight: bold; } - 实现术语-解释并排（需注意可访问性）：
dt, dd { display: inline-block; vertical-align: top; }，但必须确保屏幕阅读器仍能按逻辑顺序读出 - 避免用
float或flex把dt和dd拆到不同容器里——这会割裂语义关系
嵌套 dl 要谨慎，尤其在文档生成场景
嵌套 dl 是合法的（比如某个术语的解释里又含子术语），但实际中容易失控。静态站点生成器（如 Docsify、Docusaurus）或 Markdown 转 HTML 工具常把缩进解析成嵌套 dl，结果渲染出多层缩进，视觉混乱且难以用 CSS 统一控制。
- 优先用单层
dl+ 语义清晰的dd内容组织，而非靠嵌套表达层级 - 如果必须嵌套，给外层
dl加 class（如dl-nested），再单独写 CSS 限制缩进深度 - 检查无障碍测试工具（如 axe）是否报“nested definition lists may confuse assistive technology”警告
真正难的不是写对标签，而是判断某个内容结构到底适不适合用 dl——术语和解释之间有没有明确的“定义关系”，而不是仅仅因为看起来像两栏就硬套。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
