HTML 描述列表

WBOY原创: 2024-09-04 16:44:11522浏览

本文介绍了描述列表或定义列表以及它在 HTML 文档中的用途。那么如何定义描述列表呢？简而言之，我们可以说它是定义列表（例如，在互联网/网页上呈现信息的术语表）。然而，描述列表的使用较少，但有一定的用途。同时，这个定义列表给网页带来了附加值；例如，网页上给出的文本解释了上下文，换句话说，帮助通过语义标记上下文。通过这样做，我们可以轻松地提取结构化信息。定义列表是描述术语、值和另一个术语表的完美术语。

语法：

<dl>
<dt>
……
</dt>
<dd>
………..
</dd>
</dl

描述列表中有三个元素，分别是

、

。

定义列表
– 用于描述许多编号。列出的信息中的术语并形成外部标签。它的表达方式与普通文档类似，或者经常用作术语表。
定义术语
– 该元素当前已在定义列表下使用，并且具有内联数据或 dl 元素的值。
定义描述
- 该元素定义该元素下的数据是块级的还是内联的。

HTML 描述列表标签

描述列表是列表类型之一；它们被认为是有序项目符号列表的通用形式。唯一的区别是没有项目符号图标。

注意：任何定义列表都包含

的序列。组合/一对多关系的组合。这些描述标签在 HTML4 中受到支持，并通过 HTML5 中的新术语作为更多名称/值对进行了增强。它在问题和答案之间建立了关联链接。

类型 1：单一定义术语和共同定义

示例#1

<!DOCTYPE html>
<html>
<body>
<dl>
<dt><b>Web Designing company in Chennai<b></dt>
<dd>This service Enhance Website Exposure with professional User Interface </dd>
</dl>
</body>
</html>

输出：

HTML 描述列表

示例 #2

<html>
<head>
<title>Page Title</title>
<style>
body {
background-color: pink;
text-align: center;
color: blue;
font-family: Arial, italic;
}
</style>
</head>
<body>
<h1>HTML Demo 2</h1>
<p>This is Networking Protocol Abbreviation.</p>
<dl>
<dt>FTP
<dd>File Transfer Protocol
<dt>TCP/IP
<dd>Transmission Control Protocol/IP address
<dt>SNMP
<dd>Simple Network Management Protocol
</dl>
</body>
</html>

输出：
HTML 描述列表

类型 2：单一描述和多个术语

示例#1

<!DOCTYPE html>
<html>
<body>
<dl>
<dt> Ebay</dt>
<dt>Etsy</dt>
<dt>Walmart</dt>
<dd>The Top 10 internet shopping websites in the year 2019</dd>
</dl>
</body>
</html>

输出：

HTML 描述列表

接下来，我们将在

中使用“lang”属性。其中术语使用不同的语言。这些属性将 ISO 语言代码作为其两个字母的值。

示例#2

<!DOCTYPE html>
<html>
<body>
<h2>A Description HTML list</h2>
<dl lang="es">
<dt>formas</dt>
<dt lang="en-us">Shapes</dt>
<dt lang="fr">Formes</dt>
<dd>A Shape determines the different structure of the objects. </dd>
</dl>
</body>
</html>

输出：

HTML 描述列表

类型 3：描述多个描述的单个术语

示例

<html>
<head>
<title>DEFINITION LIST</title>
</head>
<body bgcolor=" brown" text="pink">
<h1><u>DEFINITION LIST DEMO</u></h1>
<h3>
<dl>
<dt lang="es"><u>Compact:</u></dt>
<dd>A Compact may refer to make-up case.
</dd>
<dd>When taken as adjective it refers to smaller part. Example, need a compact sofa to sit.</dd>
</dl>
<h3>
</body>
</html>

输出：

HTML 描述列表

类型 4：多个术语和多个描述

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.1">
<title>Definition List example</title>
</head>
<body>
<h1>Definition List Demo4</h1>
<dl>
<dt> Engaged</dt>
<dt>Leaves</dt>
<dd>Students got engaged during their Lab hours in the college.</dd>
<dd>Childrens feels when their father leaves for the work.</dd>
</dl>
</body>
</html>

输出：

HTML 描述列表

类型 5：使用样式属性的定义列表

此处为颜色指定样式属性，以突出显示描述术语。

示例#1

<html>
<head> HTML Definition Lists </head>
<body>
<h2> list of Popular International Entrance Examination <h2>
<dl>
<dt style="color:Blue"> TOEFL </dt>
<dd> -: Test of English As Foreign Language . This Score is Accepted in the country like Canada,UK,USA</dd>
<br>
<dt style="color:Magenta"> GRE </dt>
<dd> -: The Graduate Record Examination. This Test is allowed to enter in the States like Canada and US foran indian Students in the Science and Technology Fields  </dd>
</dl>
</body>
</html>

输出:

HTML 描述列表

使用标签，据了解，附近的文本被指定为该术语的定义。

示例#2

<!DOCTYPE html>
<html>
<head>
<title> Demo</title>
<dl>
<dt lang="en-GB"><dfn> Definition list</dfn></dt>
<dt><dfn><b>Apple fruit </b></dfn></dt>
<dd>This fruit is quoted as "miracle food" where this gives best nutrients to the body. They are rich in antioxidents</dd>
<dd>A small fragment of apple intakes daily cures cancer,heart disease etc.</dd>
<dd> Different varieties includes Braeburn,Cameo,Fuji,Gala </dd>
</dl>
</html>

输出：

HTML 描述列表

类型 6：为描述列表放置背景颜色

下面的示例通过使用属性“bgcolor”显示带有背景颜色的内容。

示例

<html>
<head>
<title>DEFINITION LIST</title>
</head>
<body bgcolor="Green" text="pink">
<h1><u>DEFINITION LIST DEMO</u></h1>
<h3>
<dl>
<dt lang="en-GB"><u>PYTHON:</u></dt>
<dd>Python is a progranning Language originally developed by Guido van. Its an Open Source and Cross-Platform. Applications include Web development, Data Machine Learning
</dd>
</dl>
<h3>
</body>
</html>
</dl>
</html>

输出：

HTML 描述列表

结论 – HTML 描述列表

我们希望这篇关于定义列表的文章或者可以说是术语表列表已经指导了演示定义列表的一些可用用途。我们已经对如何使用这些技术在信息片段之间开展有用的合作有了基本的了解。例如，谷歌词汇表给出了如何标记有意义的信息并以多种方式在网页上使用。它们具有未来的功能，一些网站使用语义来呈现其数据的美感，并如此简单和灵活地重用给定的信息。

以上是HTML 描述列表的详细内容。更多信息请关注PHP中文网其他相关文章！

html5 less html define for using Attribute Generic this background

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：HTML Unordered List下一篇：HTML Form Validation

查看更多