HTML dl 语法
在 HTML5 标准中，dl 已更名为 “Description List（描述列表）”。它不仅可以用于定义术语，还可以用于任何 “键值对” 数据的展示。
一般情况下，dl 标签都是搭配 dt、dd 这 2 个标签一起使用。
语法：
<dl>
<dt>名词 / 键</dt>
<dd>描述 / 值</dd>
……
</dl>说明：
dl 列表非常灵活，一个 dt 可以对应多个 dd（一词多义），或者多个 dt 对应一个 dd（同义词）。
提示: dl 指的是 “description list（描述列表）”，dt 指的是 “description term（描述名称词）”，而 dd 指的是 “definition details（描述细节）”。
HTML dl 摘要
| 属于 | HTML 列表 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML dl 示例
接下来，我们通过几个简单的例子来讲解一下 HTML dl 标签是如何使用的。
示例 1：dl 标签用于解释术语
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>标记性语言，用于控制网页的结构</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于控制网页的样式</dd>
<dt>JavaScript</dt>
<dd>脚本语言，用于控制网页的行为</dd>
</dl>
</body>
</html>页面效果如下图所示。
分析：
dl 最传统的用法，就是用于解释一组名词。
示例 2：dl 标签用于展示 “键值对” 数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>文章信息</h3>
<dl>
<dt>作者：</dt>
<dd>张三</dd>
<dt>时间：</dt>
<dd>2025-10-01</dd>
<dt>分类：</dt>
<dd>前端开发</dd>
<dd>Web 开发</dd>
</body>
</html>页面效果如下图所示。
分析：
在现代 Web 开发中，dl 也经常用于展示 “属性-值” 这样的数据。在这个例子中，我们使用 dl 展示了文章的元数据。其中，最后一个 dt（分类）对应了两个 dd，这在标准中是完全允许的。
示例 3：使用 div 包裹以便于布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 使用 Flexbox 布局 */
.row {
display: flex;
border-bottom: 1px solid #eee;
padding: 10px 0;
}
dt { font-weight: bold; width: 80px; }
dd { margin: 0; color: #666; }
</style>
</head>
<body>
<dl>
<div class="row">
<dt>姓名</dt>
<dd>张三</dd>
</div>
<div class="row">
<dt>邮箱</dt>
<dd>zhangsan@lvyenet.com</dd>
</div>
<div class="row">
<dt>电话</dt>
<dd>13266668888</dd>
</div>
</dl>
</body>
</html>页面效果如下图所示。
分析：
在以前，dl 标签最令人头疼的是 dt 和 dd 是平级的，我们很难让它们在视觉上 “左右对齐” 或 “分组显示”。而 HTML5.2 标准引入了一个非常实用的特性：允许在 dl 内部使用 div 标签将每一组 dt 和 dd 包裹起来。
