dl标签仅用于表达「术语–解释」语义关系，如API参数、错误码、商品参数等名词性术语配人类可读说明的场景；禁用作两栏布局、问答页面或键值对容器，否则破坏可访问性与SEO。
dl 标签不是用来“做两栏布局”的，它是 HTML 中唯一原生表达「术语–解释」语义关系的容器，用错场景会直接破坏可访问性、SEO 和屏幕阅读器导航逻辑。
dl 什么时候必须用，而不是 ul 或 table
只有内容天然构成「名词性术语 + 人类可读说明」的映射时，dl 才是语义正确的选择：
-
dt写timeoutMs，dd写 “请求超时毫秒数，默认 5000” —— ✅ API 参数文档 -
dt写401 Unauthorized，dd写 “认证失败，需携带有效 token” —— ✅ 错误码说明 -
dt写 “防水等级”，dd写 “IP68，可在 1.5 米水深下持续浸泡 30 分钟” —— ✅ 商品参数页 - 用
ul列“Q1: 登录失败？A1: 检查密码” —— ❌ 语义断裂，读屏器读成“列表项一、列表项二” - 用
table做配置项表格 —— ❌ 搜索引擎识别为数据表，而非定义结构
dt 和 dd 的嵌套规则与常见错误
浏览器按 DOM 顺序自动关联最近的前置 dt，但结构稍有偏差就会导致语义丢失：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- ✅ 正确：
<dt>src</dt><dt>data-src</dt><dd>图片资源地址，优先使用 src，src 缺失时 fallback 到 data-src</dd> - ✅ 正确：
<dt>maxRetries</dt><dd>最大重试次数</dd><dd>类型：整数；默认值：3；范围：0–10</dd> - ❌ 错误：
<dl><p><dt>...</dt></p></dl>——p不是dl的合法子元素，浏览器会隐式闭合，DOM 结构不可控 - ❌ 错误：
<dl><dd>空 dd</dd></dl>—— 没有前置dt，语义断裂，读屏器跳过或报错 - ❌ 错误：
<dt><button>点击展开</button></dt>—— 术语不该是交互控件，操作按钮应放在dd里
dl 默认样式塌陷，怎么修才不踩坑
浏览器默认只给 dd 设 margin-left，而现代 CSS 重置（如 Normalize.css）常清零它，结果就是术语和解释贴在一起。这不是 bug，是语义设计决定的渲染逻辑：
立即学习“前端免费学习笔记（深入）”；
- 别用
text-indent或padding-left硬推dd—— 热区错位，窄屏易溢出 - 推荐用逻辑属性微调：
dd { margin-inline-start: 1.5em; }（兼容 LTR/RTL） - 需要左右对齐排版：
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 1rem; }+dt { font-weight: 600; } - 移动端堆叠：
@media (max-width: 768px) { dl { display: block; } dt, dd { display: block; } } - 别给
dt加::marker—— 它不支持，图标前缀请用::before+ 字体图标
dl 在 FAQ 页面中容易被误用的边界点
FAQ 不是所有“Q&A”都适合 dl，关键看问题本身是否是标准术语：
- ✅ 可用：
<dt>API Rate Limit</dt><dd>每小时最多 1000 次调用，超出返回 429</dd> - ✅ 可用：
<dt>自动同步</dt><dd>开启后，本地修改将在 30 秒内自动上传至云端</dd> - ❌ 不该用：
<dt>为什么我登录不了？</dt>—— 这是完整疑问句，不是名词性术语，语义错位 - ⚠️ 边界情况：
dd里含步骤、条件分支、链接或按钮时，已超出“解释”范畴，应改用section+h3+details - ⚠️ 最易忽略：
dl加了class="spec-list"却没加aria-label或role="region"，读屏器无法理解上下文
