DL标签合法结构必须用<dl>成对包裹<dt>（术语）和<dd>（定义），二者为同级直接子元素；一个<dt>可对应多个<dd>，多个<dt>也可共用一个<dd>；禁止嵌套于<p>内或拆分使用。

DL标签的基本结构怎么写才合法

dl 必须成对包裹 dt（定义术语）和 dd（描述内容），不能只放一个，也不能把 dd 直接丢在 dl 外面。浏览器解析时会自动补错，但校验工具会报错，SEO 和屏幕阅读器也可能读错顺序。

• 一个 dt 可以对应多个 dd（比如同义词有多个解释）
• 一个 dd 也可以紧跟多个 dt（比如多个术语共享同一段说明）
• 不要嵌套 dl 在 p 里——p 是段落级元素，dl 是流内容，但规范不允许 dl 作为 p 的子元素

<dl>
  <dt>HTTP</dt>
  <dd>超文本传输协议，用于客户端与服务端通信。</dd>
  <dt>HTTPS</dt>
  <dd>HTTP 的安全版本，基于 TLS 加密。</dd>
</dl>

为什么用DL而不是DIV或UL来列术语解释

语义明确是核心原因。dl 告诉浏览器和辅助技术“这是术语及其定义”，而 div 或 ul 只是通用容器，无法传达这种关系。NVDA、VoiceOver 等读屏软件会把 dl 读作“描述列表”，并按 dt/dd 分组朗读；换成 ul 就只剩“列表项、列表项……”这种无意义重复。

• 搜索引擎更倾向提取 dl 中的 dt 作为关键词，dd 作为摘要片段
• CSS 里用 dl dt::before 插入图标比用类名模拟更稳定（无需额外 class 绑定）
• 不要用 dl 做菜单或纯布局——它不是为点击交互设计的，缺 aria-role 支持，键盘导航也不自然

常见错误：DD没缩进或DT/DT连写导致样式崩坏

默认浏览器样式里，dd 有左外边距（通常是 40px），dt 无缩进。但很多人手动重置了 margin 却忘了给 dd 补回缩进，结果所有描述贴着左边排成一竖条，根本分不清归属。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 别全局写 dd { margin: 0; }，至少保留 margin-inline-start 或用 padding-inline-start 替代
• 如果连续写两个 dt（中间没 dd），浏览器会把第二个 dt 当作前一个的“别名”，但 CSS 选择器 dt + dd 就失效了
• 遇到换行问题？dt 默认是 display: run-in（部分浏览器），建议显式设为 display: block 再调整样式

响应式场景下DL的宽度和换行怎么控制

dl 本身不提供行列控制，靠 CSS 实现。小屏下常见问题是 dt 文字过长撑开整行，dd 被挤到下一行还留大片空白。

立即学习“前端免费学习笔记（深入）”；

• 用 display: grid 最稳妥：dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5em; }，再加 dt { font-weight: bold; }
• 不要依赖 float 或 inline-block ——dd 宽度计算容易出错，尤其含长链接或代码块时
• iOS Safari 对 dl 的 grid 支持没问题，但得避免用 minmax(0, 1fr) 这类写法，老版本会忽略整条规则

实际项目里最容易被忽略的，是 dt 和 dd 的可访问性配对逻辑——它们靠 DOM 顺序隐式关联，一旦用 JavaScript 动态插入或移除某个 dd，又没同步更新 aria-labelledby，读屏用户就完全不知道哪段解释对应哪个术语。