PHP小码农

Appearance

dl / dt / dd 定义列表 ​

<dl>（Definition List）定义列表用于展示键值对形式的内容，配合 <dt>（Definition Term，术语/键）和 <dd>（Definition Description，描述/值）使用。常用于术语解释、元数据展示、FAQ 等场景。

前置知识

阅读本节前，建议先了解：li 列表项

基础概念 ​

<dl> 是 "Description List"（描述列表/定义列表）的缩写。与 <ul>/<ol> 不同，<dl> 不用于展示简单的项目列表，而是用于展示术语与解释的配对关系。一个 <dl> 中可以包含多组 <dt>（术语）和 <dd>（描述）。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>dl 定义列表示例</title>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于定义网页内容的结构。</dd>

    <dt>CSS</dt>
    <dd>层叠样式表，用于控制网页的视觉呈现。</dd>

    <dt>JavaScript</dt>
    <dd>一种脚本语言，用于实现网页的交互功能。</dd>
  </dl>
</body>
</html>

详细说明 ​

一个 dt 多个 dd ​

一个 <dt> 可以对应多个 <dd>，表示同一个术语有多个解释：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>一个 dt 多个 dd</title>
</head>
<body>
  <dl>
    <dt>Web 标准</dt>
    <dd>由 W3C 制定的网页技术规范</dd>
    <dd>由 WHATWG 维护的 HTML 活跃标准</dd>
    <dd>确保不同浏览器对网页的一致解析</dd>
  </dl>
</body>
</html>

多个 dt 一个 dd ​

多个 <dt> 也可以共用一个 <dd>，表示多个术语有相同的含义：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>多个 dt 一个 dd</title>
</head>
<body>
  <dl>
    <dt>JavaScript</dt>
    <dt>JS</dt>
    <dd>一种动态的、弱类型的脚本语言，广泛用于 Web 开发。</dd>
  </dl>
</body>
</html>

dl 的默认样式 ​

元素默认样式
<dl>margin-top: 1em; margin-bottom: 1em
<dt>font-weight: bold
<dd>margin-left: 40px

自定义 dl 样式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义 dl 样式</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    dl { border: 1px solid #eee; border-radius: 4px; padding: 1rem; }
    dt { font-weight: bold; margin-top: 1rem; color: #333; }
    dt:first-child { margin-top: 0; }
    dd { margin-left: 0; margin-top: 0.25rem; color: #666; padding-left: 1rem; border-left: 3px solid #ddd; }
  </style>
</head>
<body>
  <dl>
    <dt>前端开发</dt>
    <dd>使用 HTML、CSS、JavaScript 构建用户界面。</dd>
    <dt>后端开发</dt>
    <dd>使用服务器端语言处理业务逻辑和数据存储。</dd>
  </dl>
</body>
</html>

实战示例 ​

FAQ 常见问题 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>FAQ</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; line-height: 1.6; }
    dl { border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
    dt { font-weight: bold; padding: 1rem; background: #f8f9fa; border-bottom: 1px solid #eee; }
    dd { margin: 0; padding: 1rem; color: #555; }
  </style>
</head>
<body>
  <h1>常见问题</h1>
  <dl>
    <dt>什么是 HTML5？</dt>
    <dd>HTML5 是超文本标记语言的第五个主要版本，引入了许多新特性和 API，包括语义化标签、多媒体支持、本地存储等。</dd>

    <dt>HTML5 与 HTML4 有什么区别？</dt>
    <dd>HTML5 相比 HTML4 引入了语义化标签（如 header、nav、article）、多媒体标签（如 audio、video）、表单增强以及丰富的 JavaScript API。</dd>

    <dt>如何学习 HTML5？</dt>
    <dd>建议从基础语法开始学习，然后逐步掌握语义化标签、表单、多媒体和 Canvas 等进阶内容。</dd>
  </dl>
</body>
</html>

联系信息 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>联系信息</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; }
    dt { font-weight: bold; margin-top: 0.75rem; }
    dd { margin-left: 0; color: #666; }
  </style>
</head>
<body>
  <h1>公司联系方式</h1>
  <dl>
    <dt>公司名称</dt>
    <dd>某某科技有限公司</dd>
    <dt>电话</dt>
    <dd>010-12345678</dd>
    <dt>邮箱</dt>
    <dd>info@example.com</dd>
    <dt>地址</dt>
    <dd>北京市海淀区中关村大街1号</dd>
  </dl>
</body>
</html>

注意事项 ​

  • <dl> 的直接子元素只能是 <dt>、<dd> 或 <div>（用于分组）
  • 不要用 <dl> 替代 <table> 来展示表格数据
  • <dt> 和 <dd> 的顺序可以灵活组合

最佳实践 ​

  1. 术语解释用 dl：术语与定义的配对
  2. 元数据用 dl：键值对形式的信息
  3. FAQ 用 dl：问题与答案的配对
  4. CSS 定制：通过 CSS 美化 dl 的视觉效果

下一节

继续学习：menu 菜单列表

参考链接 ​