HTML - 定义列表_HTML 菜鸟教程

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>

<< HTML - 有序列表 HTML - 文本链接 >>