dl标签仅用于术语与解释的语义关系，不可用于普通问答布局；正确用法是dt为名词性术语、dd为其定义说明，如API错误码、配置项等，否则会损害可访问性与SEO。
dl 不是用来做“键值对数据布局”的，它也不该被当作 FAQ 列表的默认结构选择——除非你确认每个“问题”确实是名词性术语，且答案是对其的定义性说明。
为什么 dl 在 FAQ 场景里容易出问题
屏幕阅读器会把 dt 内容读作 “term: 为什么我登录不了？”，这不是自然语言中的问题，而是强行把疑问句当术语；搜索引擎无法识别这是问答对，只当普通描述文本处理；CSS 控制错位后，视觉热区和语义热区不一致，点击区域和可聚焦区域分离。
- 常见错误现象：
dt里写完整疑问句（如<dt>登录失败怎么办？</dt>），dd里塞操作步骤、按钮、条件分支 - 真实可用场景：API 错误码
401、配置项timeoutMs、功能名自动同步这类有明确定义边界的名词 -
dd允许嵌套ul或code，但禁止直接放button、form或交互控件——这些该在dd里，而不是dt里
dl 的合法嵌套规则必须手写对
浏览器按 DOM 顺序将 dd 自动绑定到最近的前置 dt，不靠标签闭合逻辑，靠位置。写错一行就断语义。
- ✅ 正确：
<dt>src</dt> <dt>data-src</dt> <dd>图片资源地址...</dd>（两个术语共用一个解释） - ✅ 正确：
<dt>maxRetries</dt> <dd>最大重试次数</dd> <dd>类型: 整数；默认: 3</dd>（一个术语多个解释） - ❌ 错误：
<dl><div> <dt>...</dt> <dd>...</dd> </div></dl>（div不是dl合法子元素，浏览器隐式修正后 DOM 不可控） - ❌ 错误：
<dl><dd>空 dd</dd></dl>（无前置dt，语义断裂，读屏器跳过）
样式重置比想象中更关键
现代 CSS 重置（如 Normalize.css）常清空 dd 默认的 margin-left，结果就是术语和解释贴在一起，看着像没写标签。这不是 bug，是语义设计本意 —— 它默认不假设排版方向。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 别用
padding-left推dd：热区错位，窄屏易溢出 - 推荐用逻辑属性：
dd { margin-inline-start: 1.5em; }（兼容 LTR/RTL） - 需要左右对齐时，用
dl { display: grid; grid-template-columns: max-content 1fr; }+dd { grid-column: 2; } - 移动端堆叠优先用
@media (max-width: 768px) { dl { display: block; } }，别硬拉 flex
可折叠 FAQ 别硬套 dl + JS
想加展开/收起，details/summary 是更健壮的选择：原生支持键盘（空格/回车）、自带 open 状态、无需手动补 aria-expanded 和焦点管理。
-
dl做折叠必须手动加tabindex="0"、监听keydown、同步aria-expanded、控制相邻dd的hidden属性——漏一项，视障用户就卡住 -
details天然满足：语义明确（“可展开的摘要块”）、无障碍支持完备、DOM 结构稳定 - 如果非要
dl，答案内容必须能独立理解，不能依赖前文或折叠状态；否则 SEO 和可访问性双崩
真正难的不是写对标签，而是判断「这个问题是不是术语」——多数 FAQ 里的“Q”其实是操作路径或异常场景，不是名词，这时候 dl 就是错的起点。
