HTML dl 标签

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 标签用于解释术语

分析：

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>

页面效果如下图所示。

dl 标签用于展示 “键值对” 数据

分析：

在现代 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>

页面效果如下图所示。

使用 div 包裹以便于布局

分析：

在以前，dl 标签最令人头疼的是 dt 和 dd 是平级的，我们很难让它们在视觉上 “左右对齐” 或 “分组显示”。而 HTML5.2 标准引入了一个非常实用的特性：允许在 dl 内部使用 div 标签将每一组 dt 和 dd 包裹起来。