dl 标签必须配合 dt 和 dd 使用，因 dl 本身无独立语义，dt 表示字段名、dd 表示对应值，多值需多个 dd 紧跟同一 dt，避免语义丢失；需重置默认样式并谨慎与结构化数据属性配合。
dl 标签是 HTML 中唯一语义上专为「名称-值对」设计的容器，展示书籍元数据（如作者、ISBN、出版日期）时，它比用 div 或 table 更准确、更利于屏幕阅读器解析。
为什么必须用 dt 和 dd 配合 dl
单独写 dl 没有意义——它必须嵌套 dt（definition term）和 dd（definition description）。浏览器不会自动换行或加间距，但语义结构清晰：每个 dt 是字段名（如“作者”），每个 dd 是对应值（如“刘慈欣”）。常见错误是把多个值塞进一个 dd 却不加包裹，导致无法被辅助技术区分。
正确结构示例：
<dl> <dt>作者</dt> <dd>刘慈欣</dd> <dt>ISBN</dt> <dd>978-7-5366-9293-0</dd> <dt>出版日期</dt> <dd>2008-01-01</dd> </dl>
多个作者或多个 ISBN 怎么写
一个字段对应多个值时，不能把它们拼成一个字符串丢进单个 dd。应保持一对一映射：每个值独立成 dd，且紧接在同一个 dt 后面。这样屏幕阅读器会自然读作“作者：刘慈欣；作者：王晋康”，而不是“作者：刘慈欣、王晋康”（后者会被识别为单个值）。
立即学习“前端免费学习笔记（深入）”；
- 多个作者：重复
dd，不重复dt - 多个 ISBN：同理，每个
dd放一个 ISBN，可加data-type="isbn-10"或data-type="isbn-13"辅助区分 - 避免用逗号分隔——那会让语义丢失，也影响 CSS 精确选择
样式控制要点：重置默认 margin 和 spacing
浏览器对 dl、dt、dd 的默认 margin 差异大（比如 Chrome 给 dd 加了左边距，Firefox 则不同），直接用容易错位。必须显式重置：
dl {
margin: 0;
}
dt, dd {
margin: 0;
padding: 0;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
如果需要紧凑排版（如移动端），建议用 display: grid 控制布局，而不是依赖传统浮动或 inline-block —— 因为 dt/dd 本质是块级，强行 inline 容易折行错乱。
与 JSON-LD 或 Microdata 混用时的注意事项
如果页面同时需要机器可读的元数据（比如供搜索引擎提取），别把 dl 当作结构化数据载体。它只是呈现层，不自带 schema.org 语义。必须额外加 itemprop 或 property 属性，例如：
<dl itemscope itemtype="https://schema.org/Book"> <dt>作者</dt> <dd itemprop="author" itemtype="https://schema.org/Person">刘慈欣</dd> <dt>ISBN</dt> <dd itemprop="isbn">978-7-5366-9293-0</dd> </dl>
漏掉 itemscope 和 itemtype，或者把属性加在 dt 上（错误！），都会导致结构化数据失效。验证工具（如 Google Rich Results Test）会直接忽略。
真正麻烦的是字段动态生成时——比如后端返回的元数据键名不确定，前端得判断哪些该当 dt、哪些该合并渲染。这时候语义边界就容易模糊，得靠约定或 schema 映射表来兜底。
