定义列表必须用<dl>包裹，仅含<dt>和<dd>，禁止混入其他元素；<dt>需闭合标签且可对应多个<dd>，但<dd>不可悬空；语义正确对SEO和可访问性至关重要。
定义列表用 <dl> 而不是 <ul> 或 <ol>
定义列表必须用 <dl> 包裹，里面只能直接放 <dt>（术语）和 <dd>（定义），不能混入 <p>、<div> 或其他块级元素——否则语义失效，屏幕阅读器可能跳过或误读。
常见错误是把 <dt> 和 <dd> 写成兄弟关系却漏掉配对，比如只写一个 <dt> 没跟 <dd>，或者连续两个 <dt> 中间没定义。浏览器虽会渲染，但结构断裂，SEO 和可访问性都受损。
-
<dt>必须有闭合标签：<dt>HTML</dt>，不能写成自闭合形式<dt/> - 一个
<dt>可对应多个<dd>（如多义词解释），但一个<dd>不能悬空在<dt>之外 - 不支持
type或start属性——它天生无序，也不需要编号
<dt> 和 <dd> 的嵌套与换行处理
默认情况下，<dd> 会缩进，且上下有外边距；<dt> 不缩进、无默认 margin。如果想让多个定义并排显示（比如“英文名 / 中文名 / 类型”三栏），不能靠 <br> 换行，而应把每个字段包进独立的 <dd>，并用 CSS 控制 display。
例如：
立即学习“前端免费学习笔记（深入）”；
<dl> <dt>HTTP</dt> <dd>超文本传输协议</dd> <dd>应用层协议</dd> <dd>基于 TCP</dd> </dl>
这样写语义清晰，也方便后续用 dl dd:nth-child(2) 单独样式控制“应用层协议”这一项。
- 避免在
<dt>里塞<strong>或<span>来强调——它本就是标题语义，加样式即可 -
<dd>内允许嵌套段落、列表甚至小表格，但需确保逻辑归属明确：所有内容都必须是对前面最近一个<dt>的解释
用 CSS 重置 list-style 和缩进更可控
浏览器对 <dl> 的默认缩进（尤其是 <dd> 的 marginLeft）不统一，Chrome 和 Firefox 差 20px 左右。直接设 margin-left: 0 会丢失结构感，推荐用 padding-inline-start 替代。
更稳妥的做法是显式重置：
dl {
margin: 0;
}
dt {
font-weight: 600;
margin-top: 0.5em;
}
dd {
margin: 0 0 0.5em 0;
padding-inline-start: 1em;
}
- 不用
list-style: none——<dl>本来就没有项目符号，设了无效 - 别用
text-indent控制<dd>缩进，它只影响首行，多行定义会错位 - 若需响应式缩进（比如移动端取消缩进），优先用
padding-inline-start+ 媒体查询，而非 hack 式负 margin
多个术语共用同一定义时怎么写
比如 “DOM” 和 “Document Object Model” 是同一概念的不同表达，不能写两个 <dt> 后跟一个 <dd> ——HTML 规范不允许多个 <dt> 直接连一个 <dd>（尽管部分浏览器容忍）。正确写法是合并术语，或用逗号分隔：
<dt>DOM, Document Object Model</dt> <dd>浏览器将 HTML 文档解析为对象树的模型，JavaScript 通过它操作页面</dd>
如果术语差异大（如缩写 vs 全称 vs 别名），且需分别 SEO 或锚点跳转，可重复整个 <dt><dd> 组，但内容一致：
<dt>DOM</dt> <dd>浏览器将 HTML 文档解析为对象树的模型，JavaScript 通过它操作页面</dd> <dt>Document Object Model</dt> <dd>浏览器将 HTML 文档解析为对象树的模型，JavaScript 通过它操作页面</dd>
- 不要用
<dt><dt>连写——解析器会认为第二个<dt>是新术语，前一个没定义 - 定义内容完全相同时，搜索引擎可能合并索引，但人工维护成本略高；权衡简洁性与语义精度
<dl> 或另起一段，而不是硬塞进同一个 <dd>。 
