dl、dt、dd是专用于术语与定义的语义化标签，dl为容器，dt表术语，dd表描述；必须严格嵌套，禁止孤立使用，多dt可共用一dd，一dt可配多dd，默认缩进由浏览器控制，CSS应解耦样式与语义以保障可访问性。

dl

、dt、dd 不是用来“模拟表格”或“强行对齐”的，它们是语义化容器，核心作用是建立术语与解释之间的可访问关联。用错结构，屏幕阅读器会读断、SEO 会弱化、CSS 重置后容易“消失”。

为什么 dl 渲染出来没缩进、没换行？

不是代码写错了，是浏览器默认样式被 CSS 重置抹掉了。现代项目普遍引入 normalize.css 或框架自带重置，其中常把 dd 的 margin-left 设为 0，导致术语和解释紧贴在一起。

• dd 默认有约 40px 左边距，这是它唯一原生视觉提示
• 直接写 dd { margin: 0; } 会让语义线索彻底丢失
• 更稳妥的做法是显式恢复缩进：dd { margin-inline-start: 1.5em; }（推荐用逻辑属性）
• 若需图标前缀，用 dd::before { content: "•"; margin-inline-end: 0.5em; }，不依赖缩进

dt 和 dd 的嵌套规则有哪些硬限制？

HTML5 允许 dt 里放 span、em、code 这类内联元素，但以下情况会破坏解析或可访问性：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 禁止在 dt 或 dd 外层包裹 p、div —— 它们不是块容器，加了反而让读屏器跳过术语-定义配对
• 不允许出现孤立 dd：即前面没有紧邻的 dt，比如

  xxx

  是无效结构
• 一个 dt 后可以跟多个 dd（如多角度解释），但多个 dt 共享一个 dd 虽合法，却易引发歧义，慎用
• 动态渲染时（如从 JSON 生成），必须确保每组 dd 前都有且仅有一个 dt，否则语义链断裂

想让术语和定义横向排布，能用 display: flex 吗？

可以，但必须保留原始 DOM 结构 —— flex 或 grid 只负责样式，不能动语义层级。

• 错误做法：dt { display: inline-block; width: 120px; } —— 屏幕阅读器无法感知“这列是术语、那列是解释”
• 正确做法：对 dl 设 display: grid; grid-template-columns: max-content 1fr;，再用 dt, dd { margin: 0; } 清除干扰
• 每个 dt + 对应 dd 自动成一行，语义不变，视觉可控
• 避免给 dt 加 float 或绝对定位，会导致焦点顺序错乱、打印样式异常

真正难的不是写出

API

应用程序编程接口

，而是确保整个列表在无 CSS 时仍可读、在 JS 关闭时仍可用、在屏幕阅读器里被准确播报为“术语：API，定义：应用程序编程接口”。语义结构一旦写错，后期补救成本远高于初始规范。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！