HTML - 定义列表

上一页
下一页

定义列表

HTML 定义列表定义具有术语和对应定义结构的列表项。这些类型的列表用于定义一个列表结构，其中每个列表项（数据术语）包含其对应的解释（定义描述）。

Definition Lists

<dl> 标签几乎所有浏览器都支持。它也支持全局属性和事件属性。它由类似 <dl></dl> 的开始和结束标签组成。

定义列表标签

以下是用于定义定义列表的 HTML 标签

创建定义列表

要创建定义列表，您需要使用 <dl> 标签以及 <dt> 和 <dd> 标签。

定义列表的结构

以下是使用 HTML 创建定义列表的语法（结构）

<dl>
  <dt>Term 1</dt>
  <dd>Definition for Term 1</dd>
  <dt>Term 2</dt>
  <dd>Definition for Term 2</dd>
  <dt>Term 3</dt>
  <dd>Definition for Term 3</dd>
</dl>

示例

在以下示例中，我们正在创建一个包含四个术语及其对应描述的定义列表

<!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>

定义列表样式

您还可以使用 CSS 属性自定义定义列表的默认外观。您可以将 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>

定义列表的默认 CSS

几乎所有浏览器都具有显示  <dl> 元素的默认 CSS 设置。

示例

以下代码包含定义列表的默认 CSS 属性。如果您删除它们，输出中不会有任何变化

<!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>

嵌套定义列表

嵌套定义列表允许您在主定义术语内添加详细的子定义。

示例

以下示例演示了 HTML 中的嵌套定义列表

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Nested Definition Lists Example</title>
</head>
<body>
	<h2>Nested Definition Lists Example</h2>
  <dl>
    <dt>Programming Languages</dt>
    <dd>
      <dl>
        <dt>Python</dt>
        <dd>A high-level, interpreted programming language.</dd>
        <dt>JavaScript</dt>
        <dd>A language used for web development.</dd>
      </dl>
    </dd>
    <dt>Web Technologies</dt>
    <dd>
      <dl>
        <dt>HTML</dt>
        <dd>The standard markup language for creating web pages.</dd>
        <dt>CSS</dt>
        <dd>Used for styling web pages.</dd>
      </dl>
    </dd>
  </dl>
</body>
</html>
打印页面
上一页
下一页
广告