dl只接受dt和dd作为直接子元素，插入li会导致浏览器自动纠错、DOM错乱、屏幕阅读器跳过术语、SEO与无障碍失效；dt后必须紧跟至少一个dd，但可一对多，不可跨dt共享dd。
为什么dl里直接塞li会报错或读不出来
因为dl只接受dt和dd作为直接子元素，li根本不被允许——浏览器会自动“纠错”，把li挤到dl外面，导致DOM结构错乱、屏幕阅读器跳过术语、CSS选择器失效。
- 验证工具（如 W3C Validator）会直接报
Error: Element li not allowed as child of element dl - 辅助技术可能把整个
dl块当作普通段落朗读，dt失去“可定义术语”的语义身份 - 哪怕视觉上看起来正常，也意味着你放弃了语义化带来的 SEO 和无障碍红利
dt和dd必须严格一一对应吗
不必一一对应，但必须遵守「一个dt后跟至少一个dd」的规则；一个dt可以带多个dd（比如解释类型、是否必填、默认值），但一个dd不能跨在两个dt之间。
- 合法：
<dt>timeout</dt><dd><code>number</code></dd><dd>必填</dd> - 非法：
<dt>timeout</dt><dd>类型：<code>number</code></dd><dt>retries</dt><dd>类型：<code>integer</code></dd>（中间缺dd，retries会被视为孤立dt） - 验证失败提示通常是：
Error: Element dt not followed by dd or dt
用dl做横向键值对表格时，为什么文字总被挤换行
因为dd默认有约 40px 的 margin-left，且dt和dd都是块级元素，在窄容器中自然折行。不重置就强行 flex，反而放大语义与布局的冲突。
- 基础重置必须包含：
dt, dd { margin: 0; padding: 0; } - 水平排列推荐写法：
dl { display: flex; flex-direction: column; } dt { font-weight: 600; } dd { margin-left: 1em; }（保留语义流，避免float或inline破坏可访问性） - 若需紧凑对齐（如配置项文档），用
display: grid更可控：dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5em; }，再设dt { justify-self: right; }
移动端屏幕阅读器读dl时跳得很快，怎么让术语和解释连起来读
不是代码写错了，是默认行为——多数屏幕阅读器把每个dt当独立条目触发朗读，遇到紧邻的dd不会自动合并播报。关键不在加aria-label，而在确保 DOM 顺序与视觉一致 + 合理分组。
立即学习“前端免费学习笔记（深入）”；
- 绝对不要给
dt加role="term"或aria-labelledby，这反而干扰原生解析 - 如果一组
dt+dd逻辑强关联（如 API 参数），用<section aria-labelledby="param-1"><h3 id="param-1">timeout</h3><p>...</p></section>比硬套dl更可靠 - 真正需要
dl语义时（如词汇表），保持单个dt后紧跟dd，并避免在dd内嵌套复杂结构（如ul或table），否则朗读会中断
dl当通用布局容器用——它只描述「定义关系」，不是「两栏排版」的快捷方式。一旦开始用dl写导航、卡片、FAQ 折叠区，后面修复语义和可访问性的时间，远超一开始选div+flex或details标签的成本。 
