HTML 数据描述标签示例

介绍

HTML 提供了一组标签，允许你创建定义列表，你可以在其中定义一系列术语并为每个术语提供描述。在这些列表中使用的标签之一是 <dd>（数据描述）标签，它用于提供由 <dt> 标签表示的术语的描述。在本实验中，你将学习如何使用 <dd> 标签。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70734{{"HTML 描述值"}} html/head_elems -.-> lab-70734{{"HTML 描述值"}} html/lists_desc -.-> lab-70734{{"HTML 描述值"}} html/doc_flow -.-> lab-70734{{"HTML 描述值"}} html/multimedia -.-> lab-70734{{"HTML 描述值"}} html/inter_elems -.-> lab-70734{{"HTML 描述值"}} end

创建定义列表

第一步是使用 <dl> 标签创建一个定义列表。在此标签内，你需要使用 <dt> 标签定义一个或多个术语。例如，创建一个包含两个术语的定义列表：“HTML” 和 “CSS”。

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>Description of HTML</dd>
      <dt>CSS</dt>
      <dd>Description of CSS</dd>
    </dl>
  </body>
</html>

使用 `<dd>` 标签

现在你已经使用 <dt> 标签定义了一些术语，接下来可以使用 <dd> 标签为每个术语提供描述。按照以下方式添加每个术语的描述：

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        HTML stands for Hyper Text Markup Language. It is used to create and
        structure content on the web.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS stands for Cascading Style Sheets. It is used to style HTML elements
        and make web pages look visually appealing.
      </dd>
    </dl>
  </body>
</html>

为定义列表添加样式

默认情况下，<dd> 标签会以块级元素显示并带有缩进，这使得术语和描述更容易区分。不过，你也可以使用 CSS 调整其样式。将以下样式添加到你的 HTML 代码中，以修改定义列表的外观：

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
    <style>
      dd {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        HTML stands for Hyper Text Markup Language. It is used to create and
        structure content on the web.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS stands for Cascading Style Sheets. It is used to style HTML elements
        and make web pages look visually appealing.
      </dd>
    </dl>
  </body>
</html>

在 `<dd>` 标签中使用 `<img>` 标签

你也可以使用 <img> 标签在术语的描述中添加图片。例如，让我们在 HTML 的描述中添加一个 HTML 标志的图片：

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
    <style>
      dd {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        <img
          src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"
          alt="HTML5 Logo"
        />
        HTML stands for Hyper Text Markup Language. It is used to create and
        structure content on the web.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS stands for Cascading Style Sheets. It is used to style HTML elements
        and make web pages look visually appealing.
      </dd>
    </dl>
  </body>
</html>

总结

<dd> 标签用于在定义列表中提供由 <dt> 标签定义的术语的描述。默认情况下，它会以块级元素显示并带有缩进，使其更易于阅读。你可以使用 CSS 调整其样式，甚至可以使用 <img> 标签在其中添加图片。

HTML 描述值

介绍

Skills Graph

创建定义列表

使用 <dd> 标签

为定义列表添加样式

在 <dd> 标签中使用 <img> 标签

总结

使用 `<dd>` 标签

在 `<dd>` 标签中使用 `<img>` 标签