HTML 描述列表 (<dl>, <dt>, <dd>) 深度解析：结构化名-值对信息

目录

  1. 引言：<dl> 标签：关联信息的组织者
    • 1.1 描述列表的本质与用途
    • 1.2 语义化与可访问性：为何选择 <dl>
  2. <dl> 标签基础
    • 2.1 定义与作用：表示“名-值”对集合
    • 2.2 基本语法：<dl>, <dt>, <dd>
    • 2.3 默认浏览器样式
    • 2.4 基础示例
  3. <dt> (Description Term) 标签详解
    • 3.1 定义与作用：定义术语或名称
    • 3.2 内容模型：通常包含短语内容
    • 3.3 语义化考量
  4. <dd> (Description Details) 标签详解
    • 4.1 定义与作用：定义术语的描述或值
    • 4.2 内容模型：可以包含流内容（几乎所有 HTML 元素）
    • 4.3 语义化考量
  5. <dl>, <dt>, <dd> 的属性
    • 5.1 全局属性 (Global Attributes)
    • 5.2 无特定属性
  6. 语义化应用场景与最佳实践
    • 6.1 词汇表/术语表
    • 6.2 常见问题解答 (FAQ)
    • 6.3 元数据展示
    • 6.4 对话或发言稿
    • 6.5 避免滥用：不用于通用布局
  7. <dl> 与可访问性 (Accessibility - A11y)
    • 7.1 屏幕阅读器如何解读描述列表
    • 7.2 为什么必须使用 <dl> 而非其他标签模拟
    • 7.3 提升信息理解度
  8. <dl> 的嵌套
    • 8.1 嵌套规则：必须在 <dd> 内部
    • 8.2 嵌套示例与语义
  9. <dl> 的样式化 (CSS 为主)
    • 9.1 默认样式重置
    • 9.2 常用 CSS 属性 (margin, padding, font-weight, border, color)
    • 9.3 创建不同布局
      • 传统字典样式
      • FAQ 样式
      • 水平排列的元数据
    • 9.4 常见样式示例
  10. 综合代码示例
  11. 总结

1. 引言：<dl> 标签：关联信息的组织者

在 HTML 的语义化标签集合中，描述列表 (<dl>) 是一个独特而强大的工具，专门用于呈现**“名-值”对 (Name-Value Pairs)或“术语-定义”对 (Term-Definition Pairs)。它与无序列表 (<ul>) 和有序列表 (<ol>) 不同，不侧重于项目的集合或顺序，而是强调名称与其对应描述之间的关联性**。无论是网站的词汇表、常见问题解答、商品规格，还是对话记录，<dl> 都能以语义化的方式清晰地组织这些成对的信息。

1.1 描述列表的本质与用途

<dl> 标签的本质是提供一个结构化的容器，用于包含一系列由术语 (<dt>) 和一个或多个描述 (<dd>) 组成的关联性信息。它使得信息呈现得更有层次和逻辑，直观地告诉用户“这个术语/名称的解释/值是什么”。

常见用途包括：

  • 词汇表/字典: 术语及其定义。
  • 常见问题解答 (FAQ): 问题及其答案。
  • 商品规格/属性: 属性名（如“颜色”）及其值（如“红色”）。
  • 会议议程: 议题及其讨论要点。
  • 人物对话: 人名及其说的话。
  • 元数据: 字段名（如“作者”）及其值（如“张三”）。

1.2 语义化与可访问性：为何选择 <dl>

正确使用 <dl> 不仅仅是为了内容的视觉呈现，更重要的是赋予了内容强烈的语义。这种语义对于：

  • 人类读者: 能够快速识别出“这是一个解释”或“这是一个属性值”，有助于快速获取信息。
  • 搜索引擎: 更好地理解页面的内容结构和主题。例如，识别出页面包含一系列问答或术语定义。
  • 辅助技术（如屏幕阅读器）: 能够准确地向视障用户传达“这是一个定义列表”，“这是一个术语，它的定义是…”，极大地提升了信息的可理解性和可访问性。

2. <dl> 标签基础

2.1 定义与作用：表示“名-值”对集合

  • 定义: <dl> (Description List 或 Definition List) 标签定义一个描述列表。
  • 作用: 它用于表示一个包含术语 (<dt>) 和其对应描述 (<dd>) 的集合。

2.2 基本语法：<dl>, <dt>, <dd>

  • <dl> 是描述列表的容器标签，必须有开始标签和结束标签。
  • <dt> (Description Term 或 Definition Term) 标签定义列表中的术语或名称。一个 <dl> 可以包含多个 <dt>。
  • <dd> (Description Details 或 Definition Details) 标签定义列表中的描述或值，是对紧邻其前的 <dt> 的解释。一个 <dt> 可以有零个、一个或多个 <dd>。
<dl>
    <dt>术语一</dt>
    <dd>术语一的描述。</dd>

    <dt>术语二</dt>
    <dd>术语二的描述。</dd>
    <dd>术语二的第二个描述。</dd> <!-- 一个 dt 可以有多个 dd -->

    <dt>术语三</dt>
    <dt>术语四</dt> <!-- 多个 dt 可以对应一个 dd -->
    <dd>术语三和术语四的共同描述。</dd>
</dl>

注意: 多个 <dt> 对应一个 <dd> 的用法虽然 HTML 规范允许，但在实际开发中较少见，且可能需要额外的 CSS 来明确视觉上的关联。

2.3 默认浏览器样式

大多数浏览器会默认给 <dd> 列表项添加：

  • 左侧缩进。而 <dt> 通常不缩进。
  • 没有项目符号或编号。

2.4 基础示例

<h3>HTML 核心概念</h3>
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于构建网页的结构。</dd>

    <dt>CSS</dt>
    <dd>层叠样式表，用于定义网页的样式和布局。</dd>

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

3. <dt> (Description Term) 标签详解

3.1 定义与作用：定义术语或名称

  • 定义: <dt> 标签用于定义一个描述列表中的术语、名称或标题。
  • 作用: 它代表了您想要解释或为其提供信息的“名”。

3.2 内容模型：通常包含短语内容

<dt> 标签的内容模型是流内容 (Flow Content)，但通常它内部只包含短语内容 (Phrasing Content)。这意味着您可以在 <dt> 中放置文本、<a> 链接、<em> 强调等行内元素。不推荐在 <dt> 内部放置块级元素，如 <p>, <div> 等，因为这可能会破坏列表的语义结构。

示例:

<dt><a href="#html-definition">HTML</a></dt>
<dt><strong>CSS</strong> 样式</dt>

3.3 语义化考量

<dt> 明确地将一个文本片段标记为一个“术语”或“名称”，这对于搜索引擎和辅助技术理解内容结构至关重要。它提供了一个清晰的锚点，让后续的 <dd> 可以对其进行详细的解释。

4. <dd> (Description Details) 标签详解

4.1 定义与作用：定义术语的描述或值

  • 定义: <dd> 标签用于定义描述列表中的描述或值，是对紧邻其前的 <dt> 的详细解释。
  • 作用: 它包含了与 <dt> 关联的具体信息。

4.2 内容模型：可以包含流内容（几乎所有 HTML 元素）

<dd> 标签的内容模型是流内容 (Flow Content)。这意味着它非常灵活，可以包含：

  • 文本
  • 段落 (<p>)
  • 图片 (<img>)
  • 其他列表 (<ul>, <ol>, 甚至嵌套的 <dl>)
  • 表格 (<table>)
  • 表单元素 (<form>)
  • 等等，几乎所有在 <body> 内可以出现的元素。

这种灵活性使得 <dl> 能够处理非常复杂的描述信息。

示例:

<dd>
    <p>HTML 是用于创建网页及其内容的标准标记语言。</p>
    <p>它通过一系列元素（如标题、段落、链接等）来结构化内容。</p>
</dd>
<dd>
    <ul>
        <li>特点一：结构化</li>
        <li>特点二：易学习</li>
    </ul>
</dd>

4.3 语义化考量

<dd> 明确地将一个文本或内容块标记为一个“定义”或“值”，与 <dt> 形成语义上的配对。这使得浏览器、搜索引擎和辅助技术能够理解“这个内容是解释前面那个术语的”。

5. <dl>, <dt>, <dd> 的属性

5.1 全局属性 (Global Attributes)

<dl>, <dt>, <dd> 标签都支持所有标准 HTML 全局属性，包括但不限于 id, class, style, title, lang, dir, data-* 等。这些属性用于提供通用信息或实现 CSS/JS 交互。

5.2 无特定属性

与 <ol> 有 type, start, reversed 属性不同，<dl>, <dt>, <dd> 在现代 HTML5 中没有它们自己的特定属性。所有关于外观和行为的控制都应通过 CSS 或 JavaScript 来实现。

6. 语义化应用场景与最佳实践

正确使用 <dl> 标签是创建结构清晰、语义丰富网页的关键。

6.1 词汇表/术语表

这是 <dl> 最经典的用法，用于解释专业术语。

<dl>
    <dt>SEO</dt>
    <dd>Search Engine Optimization，搜索引擎优化，旨在提高网站在搜索引擎结果页中的排名。</dd>
    <dt>API</dt>
    <dd>Application Programming Interface，应用程序编程接口，定义了不同软件组件之间交互的方式。</dd>
</dl>

6.2 常见问题解答 (FAQ)

将问题作为 <dt>，答案作为 <dd>。

<h3>常见问题</h3>
<dl>
    <dt>如何重置我的密码？</dt>
    <dd>您可以在登录页面点击“忘记密码”，然后按照提示通过注册邮箱或手机号进行重置。</dd>

    <dt>支持哪些支付方式？</dt>
    <dd>我们目前支持支付宝、微信支付和银行卡支付。</dd>
</dl>

6.3 元数据展示

例如，文章的作者、发布日期等信息。

<dl>
    <dt>作者</dt>
    <dd>张伟</dd>
    <dt>发布日期</dt>
    <dd>2023年10月26日</dd>
    <dt>标签</dt>
    <dd>HTML, CSS, Web开发</dd>
</dl>

6.4 对话或发言稿

将说话人作为 <dt>，其言论作为 <dd>。

<dl>
    <dt>主持人</dt>
    <dd>欢迎各位来到今天的圆桌会议，我们今天的主题是“未来科技发展趋势”。</dd>
    <dt>嘉宾 A</dt>
    <dd>我认为人工智能将在未来几年迎来爆发式增长，特别是在医疗和教育领域。</dd>
</dl>

6.5 避免滥用：不用于通用布局

错误示范: 不要仅仅为了缩进效果或创建简单的键值对而滥用 <dl>。如果信息没有明确的“术语-定义”或“名-值”关系，例如仅想列出一些项目，<ul> 或 <ol> 可能更合适。如果只是为了布局，应使用 <div> 配合 CSS。

7. <dl> 与可访问性 (Accessibility - A11y)

描述列表在可访问性方面具有关键作用，尤其对于依赖屏幕阅读器的用户。

7.1 屏幕阅读器如何解读描述列表

当屏幕阅读器遇到一个 <dl> 元素时，它会：

  1. 宣布列表存在: 告知用户“定义列表”或“描述列表”。
  2. 朗读术语: 当焦点移动到 <dt> 时，朗读术语内容。
  3. 朗读定义: 当焦点移动到 <dd> 时，朗读描述内容，并通常会说“定义”或“描述”。

这些信息对于视障用户理解内容的上下文和关联性至关重要。他们可以清晰地知道哪个术语对应哪个定义，避免混淆。

7.2 为什么必须使用 <dl> 而非其他标签模拟

反模式:

<p><strong>HTML</strong></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;超文本标记语言，用于构建网页的结构。</p>

这种做法对屏幕阅读器用户来说是灾难性的。屏幕阅读器会将其视为两个独立的段落，无法识别它们之间存在“术语-定义”的语义关系。用户会丢失重要的结构信息。

7.3 提升信息理解度

通过 <dl> 标签，辅助技术能够将相关的术语和定义清晰地分组和呈现，使得用户能够更高效地浏览和理解复杂的信息结构。

8. <dl> 的嵌套

描述列表也可以进行嵌套，通常在 <dd> 内部嵌套另一个 <dl>，以提供更细致的描述或分类。

8.1 嵌套规则：必须在 <dd> 内部

嵌套的 <dl> 列表必须放置在其父描述详情 (<dd>) 的内部。

错误示例:

<dl>
    <dt>术语</dt>
    <dl> <!-- 错误！不能直接放在这里 -->
        <dt>子术语</dt>
        <dd>子描述</dd>
    </dl>
</dl>

正确示例:

<dl>
    <dt>前端框架</dt>
    <dd>用于简化前端开发，提供结构化、可复用的组件和工具。</dd>
    <dd>
        <dl> <!-- 嵌套在 dd 内部 -->
            <dt>React</dt>
            <dd>一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。</dd>
            <dt>Vue.js</dt>
            <dd>一套用于构建用户界面的渐进式框架，易于上手且功能强大。</dd>
        </dl>
    </dd>
</dl>

8.2 嵌套示例与语义

嵌套描述列表非常适合需要多层级解释的场景，例如产品详细规格，其中一个大项可能包含多个子项的描述。

9. <dl> 的样式化 (CSS 为主)

所有描述列表的样式都应该通过 CSS 来控制，以实现结构与表现的分离。

9.1 默认样式重置

浏览器通常会对 dl 和 dd 添加默认的 margin 和 padding。在进行自定义布局时，可能需要先重置这些值。

dl, dt, dd {
    margin: 0;
    padding: 0;
}

9.2 常用 CSS 属性 (margin, padding, font-weight, border, color)

  • dt 通常通过 font-weight: bold; 来突出显示。
  • dd 可以通过 margin-left 来创建缩进。
  • 为 dt 和 dd 添加 padding 和 border 可以更好地分隔项目。
dt {
    font-weight: bold;
    color: #333;
    margin-top: 15px; /* 与上一个 dd 的间距 */
}
dd {
    margin-left: 20px; /* 默认缩进 */
    margin-bottom: 5px;
    color: #555;
}

9.3 创建不同布局

通过 CSS 的 display 属性，可以灵活地改变 <dl> 的布局。

传统字典样式 (默认或微调)

dt 和 dd 各占一行，dd 缩进。

dl { /* 保持默认的块级布局 */
    margin-bottom: 20px;
}
dt {
    font-weight: bold;
    margin-top: 15px;
}
dd {
    margin-left: 20px;
    border-left: 2px solid #eee;
    padding-left: 10px;
}
FAQ 样式 (问题突出，答案跟随)

问题使用 <dt>，答案使用 <dd>。

dl.faq dt {
    font-size: 1.1em;
    color: #007bff;
    margin-top: 20px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #ccc;
}
dl.faq dd {
    margin-left: 0; /* 移除默认缩进 */
    padding-top: 10px;
    padding-bottom: 15px;
    line-height: 1.6;
}
水平排列的元数据 (使用 Flexbox 或 Grid)

让 dt 和 dd 在同一行显示，例如用于展示元数据。

dl.metadata {
    display: grid; /* 使用 Grid 布局 */
    grid-template-columns: auto 1fr; /* 第一列自适应，第二列占据剩余空间 */
    gap: 5px 15px; /* 行间距和列间距 */
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
}
dl.metadata dt {
    font-weight: bold;
    color: #444;
    text-align: right; /* 术语右对齐 */
    margin-top: 0; /* 重置默认 margin */
}
dl.metadata dd {
    margin-left: 0; /* 移除默认缩进 */
    color: #666;
    margin-bottom: 0; /* 重置默认 margin */
}

9.4 常见样式示例

/* 简洁的卡片式描述列表 */
.card-dl {
    margin: 20px 0;
    padding: 0;
}
.card-dl dt {
    background-color: #f0f0f0;
    padding: 10px 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-weight: bold;
    color: #333;
    margin-top: 15px;
}
.card-dl dd {
    background-color: #ffffff;
    padding: 10px 15px;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-left: 0; /* 移除默认缩进 */
    color: #666;
}

10. 综合代码示例

以下示例展示了不同类型的描述列表、嵌套、以及 CSS 样式化，以体现良好的语义和实践。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 描述列表综合示例</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 20px;
            background-color: #f4f7f6;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3 {
            color: #2c3e50;
            margin-top: 30px;
            margin-bottom: 15px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
        }
        section {
            background-color: #fff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba[0,0,0,0.05];
        }

        /* 重置 dl, dt, dd 的默认 margin/padding */
        dl, dt, dd {
            margin: 0;
            padding: 0;
        }

        /* ---------------------- 传统词汇表样式 ---------------------- */
        .glossary-dl dt {
            font-weight: bold;
            color: #0056b3;
            margin-top: 15px;
            border-bottom: 1px dotted #e0e0e0;
            padding-bottom: 3px;
        }
        .glossary-dl dd {
            margin-left: 20px; /* 默认缩进 */
            margin-bottom: 10px;
            padding: 5px 0;
        }

        /* ---------------------- FAQ 样式 ---------------------- */
        .faq-dl dt {
            font-size: 1.2em;
            color: #28a745; /* 问题绿色 */
            margin-top: 25px;
            margin-bottom: 10px;
            padding-left: 10px;
            border-left: 4px solid #28a745;
        }
        .faq-dl dd {
            margin-left: 14px; /* 与 dt 边框对齐 */
            padding-bottom: 15px;
            color: #555;
            background-color: #f9fdf9;
            border-bottom: 1px solid #e2e6e0;
            padding: 10px;
            border-radius: 0 0 5px 5px;
        }
        .faq-dl dd:last-of-type {
            border-bottom: none;
        }

        /* ---------------------- 水平元数据样式 (Grid 布局) ---------------------- */
        .metadata-dl {
            display: grid;
            grid-template-columns: max-content 1fr; /* 第1列内容自适应，第2列占据剩余空间 */
            gap: 8px 15px; /* 行间距和列间距 */
            border: 1px solid #e9ecef;
            background-color: #f8f9fa;
            padding: 15px 20px;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        }
        .metadata-dl dt {
            font-weight: bold;
            color: #495057;
            text-align: right;
        }
        .metadata-dl dd {
            color: #6c757d;
        }
        .metadata-dl dd ul { /* 嵌套在 dd 中的列表 */
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: inline; /* 让列表项在同一行 */
        }
        .metadata-dl dd li {
            display: inline;
            margin-right: 10px;
            color: #007bff;
        }
        .metadata-dl dd li::after {
            content: ",";
            color: #007bff;
        }
        .metadata-dl dd li:last-child::after {
            content: "";
        }

        /* ---------------------- 对话记录样式 (更复杂的 dd 内容) ---------------------- */
        .dialogue-dl dt {
            font-weight: bold;
            color: #6f42c1; /* 说话人紫色 */
            margin-top: 20px;
        }
        .dialogue-dl dd {
            margin-left: 20px;
            background-color: #f5f0fb;
            border-left: 3px solid #6f42c1;
            padding: 10px 15px;
            border-radius: 0 5px 5px 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
    </style>
</head>
<body>
    <h1>HTML 描述列表 (`<dl>`, `<dt>`, `<dd>`) 综合示例</h1>

    <section>
        <h2>IT 术语词汇表 (`.glossary-dl`)</h2>
        <dl class="glossary-dl">
            <dt>HTML</dt>
            <dd>超文本标记语言，是构建网页内容和结构的基石。</dd>

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

            <dt>JavaScript</dt>
            <dd>一种高级编程语言，用于实现网页的交互功能和动态内容。</dd>
        </dl>
    </section>

    <section>
        <h2>常见问题解答 (`.faq-dl`)</h2>
        <dl class="faq-dl">
            <dt>如何注册账户？</dt>
            <dd>点击页面右上角的“注册”按钮，填写您的邮箱和密码，然后按照提示完成邮箱验证即可。</dd>

            <dt>你们的退款政策是什么？</dt>
            <dd>我们提供 30 天无理由退款服务。如果您在购买后 30 天内对产品不满意，可以申请全额退款。</dd>
        </dl>
    </section>

    <section>
        <h2>文章元数据 (`.metadata-dl` - 使用 Grid 布局)</h2>
        <dl class="metadata-dl">
            <dt>标题</dt>
            <dd>HTML 描述列表深度指南</dd>
            <dt>作者</dt>
            <dd>艾小星</dd>
            <dt>发布日期</dt>
            <dd>2023年10月26日</dd>
            <dt>标签</dt>
            <dd>
                <ul>
                    <li>HTML</li>
                    <li>列表</li>
                    <li>语义化</li>
                    <li>可访问性</li>
                </ul>
            </dd>
            <dt>版本</dt>
            <dd>1.0</dd>
        </dl>
    </section>

    <section>
        <h2>客户服务对话记录 (`.dialogue-dl`)</h2>
        <dl class="dialogue-dl">
            <dt>客服</dt>
            <dd>您好，很高兴为您服务。请问有什么可以帮助您的？</dd>
            <dt>客户</dt>
            <dd>我购买的商品显示已发货，但物流信息一直没有更新。</dd>
            <dt>客服</dt>
            <dd>请您提供一下订单号，我帮您查询一下具体情况。</dd>
            <dt>客户</dt>
            <dd>订单号是 20231026123456。</dd>
            <dt>客服</dt>
            <dd>
                <p>好的，我已查到您的订单。根据系统显示，该订单已于昨日发出，目前正在运输途中。</p>
                <p>由于最近物流高峰，信息更新可能会有延迟，请您耐心等待。预计两天内会有新的物流状态。</p>
            </dd>
        </dl>
    </section>

    <section>
        <h2>产品规格 (嵌套描述列表)</h2>
        <dl class="glossary-dl">
            <dt>智能手机 X Pro</dt>
            <dd>我们最新的旗舰智能手机，集成了尖端技术和卓越设计。</dd>
            <dd>
                <dl>
                    <dt>显示屏</dt>
                    <dd>
                        <ul>
                            <li>6.7 英寸 OLED 屏幕</li>
                            <li>120Hz 自适应刷新率</li>
                            <li>峰值亮度 1200 尼特</li>
                        </ul>
                    </dd>
                    <dt>处理器</dt>
                    <dd>最新一代八核芯片</dd>
                    <dt>摄像头系统</dt>
                    <dd>
                        <ol>
                            <li>50MP 主摄 (OIS)</li>
                            <li>12MP 超广角</li>
                            <li>10MP 长焦 (3x 光学变焦)</li>
                        </ol>
                    </dd>
                    <dt>电池</dt>
                    <dd>5000mAh，支持 65W 快充</dd>
                </dl>
            </dd>
        </dl>
    </section>

</body>
</html>

11. 总结

为您详尽解析了 HTML 描述列表 (<dl>) 标签及其子元素 <dt> 和 <dd>。它们是 HTML 中用于表达具有“名-值”或“术语-定义”关联信息的核心元素。

核心要点回顾:

  • <dl> 强调关联性，而非项目的集合性 (<ul>) 或顺序性 (<ol>)。
  • 基本语法由 <dl> 作为容器，<dt> (术语/名称) 和 <dd> (描述/值) 成对出现。
  • dt 标签通常包含短语内容，定义术语。
  • dd 标签内容模型非常灵活，可以包含流内容（几乎所有 HTML 元素），定义对术语的描述。
  • 语义化至关重要：正确使用 <dl> 可以极大地提升网页的信息架构，对 SEO 和可访问性有积极影响。它帮助浏览器、搜索引擎和辅助技术理解内容之间的明确关联。
  • 可访问性 (A11y)：屏幕阅读器会准确地向用户传达“术语-定义”关系，因此绝不能使用其他标签来模拟描述列表。
  • 嵌套：描述列表可以嵌套，但必须在父 <dd> 标签内部。
  • 样式化：应完全通过 CSS 进行，利用 display: grid 或 flex 等属性可以创建出高度自定义的布局，如水平排列的元数据。

通过熟练掌握 <dl> 标签及其相关技术，您将能够创建出既美观又信息清晰、逻辑严谨，并且对所有用户都高度可访问的 Web 内容。

# html # 前端
Logo
火山引擎 ADG 社区

火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。

更多推荐

OpenClaw 本地部署完整指南（Windows + Ollama）

本文档基于实际部署经验编写，旨在帮助你在 Windows 系统上从零开始搭建 OpenClaw，并连接本地 Ollama 模型（如 Qwen2.5 或 Qwen3），使其具备完整的智能体能力。文档包含了所有关键步骤以及常见问题的解决方案。

avatar 火山引擎 ADG 社区

OpenClaw 小白安装指南（Windows版）

（类似一个能自动执行任务的AI机器人），不是游戏。API Key只保存在你本地电脑的加密文件里，不会上传到任何地方。访问：https://github.com/miaoxworld/openclaw-manager/releases。: 一键安装脚本会自动安装Node.js 22+，如果失败，手动下载安装：https://nodejs.org/：在PowerShell中，鼠标右键就是粘贴，不需要按

avatar 火山引擎 ADG 社区

飞书 × OpenClaw 接入指南：不用服务器，用长连接把机器人跑起来

这个项目存在的意义，就是把“飞书接 OpenClaw”这件事，整理成一套的配置入口，并把官方文档没覆盖到的坑集中写成排查清单。先说清楚它的角色：OpenClaw 现在已经内置官方飞书插件 @openclaw/feishu，功能更完整、维护也更及时。，说明飞书 + AI 的接入已经走通。另外，仓库也推荐了一个新项目：把 OpenClaw 变成“多 Agent 团队”，用多个 Agent 分工，Sla

avatar 火山引擎 ADG 社区