必须用 dl 而不是 ul 或 div 套术语表，因为只有 dl 能向浏览器、搜索引擎和读屏器明确传达“术语—定义”的语义关系；ul+strong 或 div 无法建立配对逻辑，导致 at 识别失败、seo 降权。
为什么必须用 dl 而不是 ul 或 div 套术语表
因为只有 dl 能向浏览器、搜索引擎和读屏器明确传达“这是术语，那是它的定义”这一逻辑关系。用 ul + strong 模拟，语义上只是“一串加粗文字+一段文字”，AT（辅助技术）无法识别配对；用 div 堆砌更糟——连列表结构都丢失。SEO 也不会把这种内容识别为术语解释，而会当成普通段落降权。
dt 和 dd 必须是 dl 的直接子元素
常见错误是往中间塞 div、p 或空行占位：
- API
- 应用程序编程接口…
这会破坏 DOM 语义树，导致读屏器跳过 dt，或只朗读“容器”而非术语本身。正确写法只有一层嵌套：
-
dl是唯一合法父容器 - 所有
dt和dd必须紧挨着放在dl内部，顺序可交替（dt→dd→dt→dd），但不能隔开 - 想加间距？用 CSS 的
margin或gap，别动 HTML 结构
一个术语多个解释，或多个术语共用一个解释怎么写
HTML5 明确支持两种模式，关键在平级排列，不嵌套：
- 一个
dt对应多个dd：比如 “flexbox” 既有概念解释，又有兼容性说明，就连续写两个dd，读屏器会依次朗读 - 多个
dt共享一个dd：比如 “DOM” 和 “文档对象模型” 是同一概念的中英文表述，就并列写两个dt，再跟一个dd - 禁止把多个
dt包进一个div再塞进dl——这会让 AT 认为只有一个术语，第二个被忽略
默认样式靠不住，CSS 得手动兜底
浏览器对 dl 几乎不提供默认视觉提示，dd 的缩进常被 Normalize.css 等重置清零，结果术语和定义挤成一行。最简兜底方案：
dl { line-height: 1.6; }
dt { font-weight: 600; margin-bottom: 0.25em; }
dd { margin-inline-start: 1.5em; margin-top: 0; }
如果要水平对齐（如参数表），用 Grid 更稳：
- 避免给
dt设固定 width + float/flex，会切断语义关联 - 用
display: grid+grid-template-columns控制列宽，dt和dd仍保持平级结构 - 窄屏下切回单列，必须用媒体查询重置
grid-column，否则dd可能跑到上一行末尾
动态渲染时最容易漏掉的是结构校验：从 JSON 渲染术语表，必须确保每个 dd 前面都有且仅有一个未被闭合的 dt，否则无障碍测试工具会报错，但控制台不会提示任何 JS 异常。
