dl标签是语义容器而非排版工具；dt不可嵌套p，因读屏器误识为段落而非术语；一个dt可对应多个连续dd；用CSS Grid需显式定义列结构；动态渲染时DOM断裂（如孤立dd、dt/dd被包裹、顺序颠倒）会导致无障碍失效。
dl 标签不是排版工具，而是语义容器；只要结构错一层，读屏器就可能完全跳过整个术语表——这不是样式问题，是 DOM 树断裂。
为什么dt里不能套p
浏览器允许，但读屏器会把 <dt><p>API</p></dt> 识别为“段落”，而不是“API”这个术语。它本就是短语级内容，天然独占一行。dt 支持 <code>、<em> 等行内元素，加 p 反而引入多余语义层级。如果需要换行或强调，用 CSS 控制更安全。
一个dt对应多个dd的写法必须连续
这是 API 文档、参数说明中最常见的场景：字段名一次定义，后面跟类型、默认值、是否必填三段描述。
<dl> <dt>timeout</dt> <dd>number</dd> <dd>3000</dd> <dd>required</dd> </dl>
- 必须连续写，中间不能插
p、div或空行 - 别为了视觉对齐拆成三个
dt——那会丢失“这三项都属于timeout”的语义关联 - 读屏器会按顺序朗读：“timeout，类型：number，默认值：3000，是否必填：required”
用 CSS Grid 布局时dl必须显式声明列结构
默认的 margin-left 缩进在嵌套容器或响应式中极易错位。用 Grid 能绑定术语与描述的位置关系，但关键点在于：
-
dl { display: grid; grid-template-columns: auto 1fr; }——不依赖文档流，显式两列 -
dt { grid-column: 1; }和dd { grid-column: 2; margin: 0; }——清除默认缩进，防止叠加 - 窄屏下必须还原单列：
@media (max-width: 480px) { dl { grid-template-columns: 1fr; } dt, dd { grid-column: 1; } }
动态渲染时最隐蔽的错误是 DOM 结构断裂
从 JSON 渲染术语表时，程序常犯的错误不是样式问题，而是结构失效：
- 孤立的
dd（前面没dt）——浏览器不报错，但无障碍测试工具直接标红 -
dt和dd被div或p包裹在中间——dl的子元素必须全是dt或dd - 多个
dt共用一个dd时，顺序写反（dd在前）——语义失效，读屏器无法建立映射
真正难调试的是这些：不报 JS 错误，页面看着也正常，但对屏幕阅读器用户来说，整张术语表等于不存在。
