dl 是语义容器，仅用于术语-定义关系；dd 缩进被重置需用 margin-inline-start 恢复；dt 与 dd 必须平行嵌套为 dl 直接子元素；多 dd 对一 dt 合法；布局改用 grid/flex 但不破坏 dom 结构。
dl 不是用来“做两栏布局”的，它是语义容器，只该出现在有明确术语-定义、字段-值关系的地方。用错结构，屏幕阅读器读断、搜索引擎忽略、CSS 重置后直接不可读。
为什么 dd 突然没缩进了？
不是你写错了，是 normalize.css 或框架 CSS 把 dd 的默认 margin-inline-start（约 40px）清掉了。浏览器原生只靠这个缩进来暗示“这是解释”，没了它，语义视觉线索就断了。
- 别写
dd { margin: 0; }—— 这等于主动抹掉可访问性锚点 - 恢复缩进优先用逻辑属性：
dd { margin-inline-start: 1.5em; } - 如果要加图标前缀，用
dd::before，别依赖缩进做对齐 - 检查 computed 样式里的
margin-inline-start值，确认是否被重置
dt 和 dd 必须平行嵌套，不能套娃
dt 和 dd 都必须是 dl 的直接子元素，彼此是兄弟关系。常见错误是把 dd 塞进 dt 里，或用 div 包一层再放进去——这会让屏幕阅读器跳过整个配对。
- 合法结构：
<dl> <dt>API</dt> <dd>应用程序编程接口</dd> </dl> - 非法结构：
<dl> <dt>API</dt> <dd>应用程序编程接口</dd> </dl>（dd在dt内） - 也非法：
<dl><div> <dt>API</dt> <dd>...</dd> </div></dl>（div中断语义流） - 动态渲染时（如从 JSON 映射），确保每个
dd前都有且仅有一个dt，否则语义链断裂
横向排布时，别动 DOM 结构
想让 dt 和 dd 并排显示？可以用 display: grid 或 flex，但前提是保持原始层级：所有 dt 和 dd 仍是 dl 的直系子元素。
- 错误做法：
dt { display: inline-block; width: 120px; }—— 屏幕阅读器无法识别列关系 - 正确做法：
dl { display: grid; grid-template-columns: max-content 1fr; }，再清掉dt、dd的默认 margin - 多个
dd对应一个dt是推荐的（比如 HTTP 协议分协议类型、端口、状态码三条解释），每条dd独立语义，利于 JS 操作和无障碍朗读 - 避免给
dt加float或position: absolute，焦点顺序和打印样式会出问题
真正难的不是写出标签，而是确保无 CSS 时仍可读、JS 关闭时仍可用、屏幕阅读器能准确播报“术语：XXX，定义：YYY”。语义结构一旦写错，后期补救成本远高于初始规范。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
