Html 简明教程

HTML - Definition Lists

HTML 定义列表用于定义描述列表，它使用 <dl> 标记表示。它与 <dt> 和 <dd> 一起使用。 在 HTML 中，描述列表或定义列表以字典的形式在其元素中显示其元素，其中，如果我们定义一个描述列表，它将通过使用以下标记来描述列表中的每个元素。

HTML Definition/Description Lists Tags

以下提到的标记用于在 HTML 中创建描述或定义列表。

  1. 此用于定义描述列表。

  2. 用于定义数据。

  3. 用于定义数据定义，即描述。

Syntax

<dl>
   <dt>Heading 1</dt>
      <dd>Description 1</dd>
   <dt>Heading 2</dt>
      <dd>Description 2</dd>
</dl>

Examples of Definition Lists

以下是一些示例，显示了如何在 HTML 中定义一个定义列表。

Define Definition List

以下是一个在 HTML 中定义定义列表的示例

<!DOCTYPE html>
<html>
<body>
   <h2>Different Types Of Languages</h2>
   <dl>
   <dt>English:</dt>
   <dd>
      English is the first world language. We can
      use English language for communication in all
      areas like politics, media, entertainment,
      art etc.
   </dd>

   <dt>Hindi:</dt>
   <dd>
      Hindi is an Indo-Aryan language spoken mostly
      in India. In India Hindi is spoken as a first
      language by most of the people.
   </dd>

   <dt>Marathi:</dt>
   <dd>
      Marathi is an Indo-Aryan language spoken by
      Marathi people of Maharashtra in India. It
      is a official Language of Maharashtrian
      people
   </dd>

   <dt>French:</dt>
   <dd>
      French is the official language in Canada,
      Central, African, Burkina, Faso, Burundi etc.
   </dd>
   </dl>
</body>
</html>

Styling Definition List using CSS

在以下示例中，我们使用 * CSS* 为定义列表设置样式。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: Arial, sans-serif;
         margin: 20px;
      }
      dl {
         background-color: #f9f9f9;
         border: 1px solid #ddd;
         padding: 20px;
         border-radius: 5px;
         max-width: 400px;
         margin: 0 auto;
      }
      dt {
         font-weight: bold;
         color: #333;
         margin-top: 10px;
      }
      dd {
         margin: 0 0 10px 20px;
         color: #555;
      }

   </style>
</head>

<body>

<dl>
<dt>Tutorialspoint</dt>
   <dd>
      Tutorialspoint provides access to a library
      of video courses on various prominent
      technologies, aimed at helping individuals
      master those technologies and become
      certified professionals.
   </dd>

<dt>Tutorix</dt>
   <dd>
      Tutorix is child company of tutorialspoint
      that covers NCERT-based syllabus for maths
      and science. Also give a great foundation
      for IIT/JEE and NEET aspirants.
   </dd>
</dl>

</body>
</html>

Default CSS for Definition List

几乎所有浏览器都针对 <dl> 元素显示默认的 CSS 设置。在以下代码中，如果您删除样式，输出将不会改变，因为我们定义的样式是 <dl> 标签的默认样式。

<!DOCTYPE html>
<html>
<head>
   <!-- This is default style of Definition Lists -->
   <style>
      dl {
         display: block;
         margin-top: 1em;
         margin-bottom: 1em;
         margin-left: 0;
         margin-right: 0;
      }
   </style>
</head>

<body>
   <dl>
      <dt>Definition List</dt>
      <dd>
         A list of terms and their definitions.
      </dd>

      <dt>Android</dt>
      <dd>Android tutorial.</dd>

      <dt>Ruby</dt>
      <dd>Ruby tutorial.</dd>
   </dl>
   <p>
      We added default style to Description List
   </p>
</body>

</html>