HTML 定义列表用于定义描述列表，它通过使用 <dl> 标签来表示。它与 <dt> 和 <dd> 一起使用。在 HTML 描述列表或定义列表中，在字典中以定义形式显示其元素，如果我们定义描述列表，它将使用以下标记对列表中的每个项目进行描述。
<dl> 标签支持几乎所有浏览器。它还支持全局属性和事件属性。它由打开和关闭标签组成，如 <dl></dl>
HTML 定义/描述列表标签
下面提到的标签用于在 HTML 中创建描述或定义列表。
- HTML <dl> 标签：用于定义描述列表。
- HTML <dt> 标签：用于定义数据。
- HTML <dd> 标签：用于定义数据描述。
语法
<dl>
<dt>Heading 1</dt>
<dd>Description 1</dd>
<dt>Heading 2</dt>
<dd>Description 2</dd>
</dl>
定义列表的示例
以下是一些示例，演示如何在 HTML 中定义定义列表。
定义定义列表
以下是在 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>
使用 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>qikepu.com</dt>
<dd>
qikepu 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 qikepu.com
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 设置。在以下代码中，如果删除样式，则输出中不会有任何变化，因为我们定义的样式是 <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>
