dl、dt 和 dd 是 HTML5 中构建定义列表的语义化标签，dl 为容器，dt 标记术语（简短明确，可含内联元素），dd 标记定义（可含块级内容及嵌套结构），三者须严格嵌套且不可滥用为布局工具。

dl、dt 和 dd 是 HTML5 中专用于构建定义列表（Definition List）的语义化标签，它们共同表达“术语—定义”之间的逻辑关系，比用 div 或 p 堆砌更清晰、更利于可访问性和 SEO。

dl 是定义列表的容器

它不表示具体条目，而是整个定义结构的包裹元素，类似 ul 之于无序列表。一个 dl 内可包含多个 dt-dd 组合，也可出现多个 dt 对应一个 dd（如多个同义词共用一个解释），或一个 dt 后跟多个 dd（如一个术语有多个层面的说明）。

dt 标记术语（Definition Term）

dt 表示被解释的关键词、名称或概念，通常简短明确。它不能直接包含块级元素（如 div、p），但允许内联元素（如 em、a、code）。例如：

HTML5

flexbox

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

dd 标记定义（Definition Description）

dd 描述 dt 所指内容，可包含段落、列表、图片甚至嵌套的 dl，灵活性强。浏览器默认对 dd 缩进，但建议用 CSS 控制样式以保持一致性。常见写法包括：

• 单个段落：
  第五代超文本标记语言，支持语义化、多媒体与本地存储。
• 多段说明：

  …

  …

• 嵌套结构：

  兼容性

  IE10+ 支持基本特性。

实际应用中的注意事项

• dt 和 dd 必须直接子元素于 dl，不可跳层或混入其他标签（如直接放 p 在 dl 下是无效 HTML）
• 避免用 dl 模拟菜单、侧边栏或纯图标列表——这不是它的语义本意
• 屏幕阅读器会将 dt-dd 关联为“术语：定义”，所以术语要准确，定义需完整，避免空 dd 或仅图标无文字
• 响应式设计中，可通过 CSS 切换 dt/dd 的显示方式（如移动端改为上下堆叠，桌面端并排）

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