dl 是 HTML 中创建术语表唯一语义正确的标签，dt 放术语、dd 放定义，支持多术语共用定义或一定义对应多术语，需保持平级结构、避免嵌套，并配合 grid 布局与 id 锚点提升可访问性和 SEO。
用 dl 标签做术语表，不是“可选”，是语义唯一正确方式
HTML 中没有 term-list 或 glossary 标签。浏览器和读屏器只认 dl（description list）——它专为“术语+定义”成对结构设计，dt 放术语，dd 放解释，这是唯一具备原生语义、SEO 友好、无障碍可访问的方案。
常见错误是用 ul + strong 模拟术语表，结果搜索爬虫无法识别术语关系，视障用户也无法通过快捷键跳转到定义项。
-
dt必须直接子元素于dl，不能嵌套在div或p里 - 一个
dt可对应多个dd（比如同义词共用一个定义），一个dd也可跟多个dt（比如近义词共享解释） -
dd默认有左侧缩进，若需重置样式，优先用margin-inline-start而非padding-left，避免与 RTL 语言冲突
多术语共用一个定义时，dt 并列写，别套 div
例如“DOM”和“文档对象模型”指向同一概念，错误写法是把两个 dt 塞进一个 div 再放进 dl——这会破坏语义层级，AT（辅助技术）可能只读出第一个 dt。
- DOM
- 文档对象模型
- 浏览器将 HTML 解析成的树状对象结构，JavaScript 通过它操作页面。
注意：dt 和 dd 是平级兄弟，不是父子。并列 dt 后紧跟一个 dd，就是标准共用定义模式。
响应式术语表：用 CSS Grid 控制术语/定义换行，别用 float 或 inline-block
小屏下强行让术语和定义横排（如两栏）会导致阅读顺序错乱，尤其对键盘 Tab 或屏幕朗读顺序不利。现代做法是用 display: grid 控制布局，同时保持 DOM 顺序即阅读顺序：
dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.25em 1em;
}
dt { grid-column: 1; font-weight: 600; }
dd { grid-column: 2; margin: 0; }
@media (max-width: 480px) {
dl { grid-template-columns: 1fr; }
dt, dd { grid-column: 1; }
}
关键点：grid-column 显式声明位置，比依赖文档流更可控；媒体查询中还原为单列，确保窄屏下 dt → dd 自然上下衔接，无障碍体验不打折。
SEO 和可访问性容易被忽略的细节
光有 dl 不够，还得补两处隐性信号：
- 给
dl加role="definition"（虽非必需，但部分旧版读屏器更敏感） - 每个
dt最好带id，方便其他地方用@#@#@#@#@#@#@#@#@#@0 - 避免在
dd里塞大段 HTML（如多层div、section），会干扰 AT 对定义边界的判断；若需分段，用p包裹，而非额外容器
术语表不是装饰性内容，它的结构干净度直接影响搜索引擎是否把它当权威解释源收录，也决定视障用户能否一键唤出全部术语列表 —— 这些都藏在标签选择和属性细节里，而不是 CSS 样式里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
