HTML 說明列表-html教學-PHP中文網

HTML 描述清單標籤

類型 1：單一定義術語與共同定義

類型 2：單一描述和多個術語

類型 3：描述多個描述的單一術語

類型 4：多個術語和多個描述

類型 5：使用樣式屬性的定義清單

類型 6：為描述清單放置背景顏色

結論 – HTML 描述清單

首頁

web前端

html教學

HTML 說明列表

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:44 PM

html html5 HTML Tutorial HTML Properties HTML tags

本文介紹了描述清單或定義清單以及它在 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 描述清單

我們希望這篇關於定義列表的文章或可以說是術語表列表已經指導了演示定義列表的一些可用用途。我們已經對如何使用這些技術在資訊片段之間進行有用的合作有了基本的了解。例如，Google詞彙表給出瞭如何標記有意義的資訊並以多種方式在網頁上使用。它們具有未來的功能，一些網站使用語義來呈現其資料的美感，並如此簡單和靈活地重複使用給定的資訊。

以上是HTML 說明列表的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn