技术文档中参数名、状态码、配置项、协议字段等「名称-值」强映射关系必须用dl；纯步骤、多对多关系、带操作按钮的交互说明一律禁用；dt须为名词性短语，dd可嵌套dl但层级不超过两层。
技术文档里哪些字段该用 dt/dd 而不是表格或列表
参数名、状态码、配置项、协议字段这类「名称-值」强映射关系的内容，必须用 dl；纯步骤、多对多关系、带操作按钮的交互说明，一律不用。
常见误用包括：把“1. 启动服务 → 2. 加载配置 → 3. 监听端口”塞进 dt/dd，或给每个 dd 里放一个 button 让用户点击复制值——前者语义错位，后者破坏可访问性。
-
dt应为名词性短语，如timeout、HTTP/2、404 Not Found，不能是动宾结构（如“点击重试”）或完整句子（如“为什么请求会超时？”） -
dd可含code、pre、链接甚至嵌套dl（比如某字段下再分type、default、example），但禁止直接放input或select - 多个同义参数共用同一说明（如
host和server）时，连续写两个dt再跟一个dd，比重复写两遍更语义准确
dl 在 API 文档中怎么避免被当成普通段落
默认样式下 dd 只有左缩进，dt 无视觉强调，屏幕阅读器和爬虫都容易忽略结构。必须加轻量级 CSS 强化语义表达。
- 最简有效修复：
dt { font-weight: 600; margin-bottom: 0.25em; }+dd { margin-left: 1.5em; margin-top: 0; } - 若需左右对齐（术语左对齐、值右对齐），用
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25em 1em; }，并确保每个dd显式设grid-column: 2，否则换行时可能错列 - 禁用
dt::before { content: "● "; }这类装饰——它不增加语义，反而干扰读屏器把dt当作独立条目识别
多层嵌套定义（如协议字段套字段）怎么写才合法
dd 允许包含块级内容，所以嵌套 dl 是标准用法，但必须满足 DOM 层级约束：所有 dt/dd 必须直接子元素于某个 dl，不能跳层。
- 正确：
<dd><dl> <dt>status</dt> <dd>200 OK</dd> </dl></dd> - 错误：
<dd><div><dl> <dt>status</dt> <dd>200 OK</dd> </dl></div></dd>（div阻断了语义流） - 嵌套层级建议不超过两层——三层以上会让读屏器导航困难，也增加 CSS 维护成本
- 嵌套时
dd的缩进需叠加控制，例如外层dd { margin-left: 1.5em; }，内层dl dd { margin-left: 1em; }
导出 PDF 或打印时 dl 样式塌陷怎么办
多数 PDF 生成工具（如 wkhtmltopdf、Puppeteer）默认忽略 display: grid，且对 margin-left 渲染不稳定，导致术语和定义挤成一行。
- 打印专用兜底方案：
@media print { dd { margin-left: 0; text-indent: 2em; } dt { font-weight: bold; } } - 避免用 Flex/Grid 布局做核心结构——它们在 print 媒体查询中兼容性差，
margin+text-indent更可靠 - 如果必须保留网格布局，加
@media print { dl { display: block; } dt, dd { display: block; } }强制回退为流式布局
真正难处理的是嵌套 dl 的缩进继承和打印分页——浏览器分页算法常在 dd 中间断开，而嵌套结构又加剧这个问题。实际项目中，这类内容最好单独切片导出，别硬塞进长页 PDF。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
