Heim > Web-Frontend > HTML-Tutorial > HTML-Beschreibungsliste

HTML-Beschreibungsliste

WBOY
Freigeben: 2024-09-04 16:44:11
Original
576 Leute haben es durchsucht

Dieser Artikel beschreibt die Beschreibungsliste oder Definitionsliste und wie sie in einem HTML-Dokument nützlich ist. Wie definiert man also eine Beschreibungsliste? In einfachen Worten können wir sagen, dass es sich um eine Liste von Definitionen handelt (z. B. Glossare zur Darstellung der Informationen im Internet/auf einer Webseite). Die Verwendung der Beschreibungsliste ist jedoch geringer, hat aber einen bestimmten Zweck. Mittlerweile verleihen diese Definitionslisten der Webseite einen Mehrwert; Beispielsweise erklärt der auf der Webseite angegebene Text den Kontext, indem er durch die semantische Markierung des Kontexts hilft. Auf diese Weise können wir die strukturierten Informationen leicht extrahieren. Eine Definitionsliste ist ein perfekter Begriff, um die Begriffe, Werte und ein weiteres Glossar zu beschreiben.

Syntax:

<dl>
<dt>
……
</dt>
<dd>
………..
</dd>
</dl
Nach dem Login kopieren

Die Beschreibungsliste enthält drei Elemente:

,
,
.

  1. Definitionsliste
    – Es wird verwendet, um die vielen Nein zu beschreiben. der Begriffe in den aufgelisteten Informationen und bildet ein äußeres Tag. Es vermittelt wie in den normalen Dokumenten oder wird oft als Glossar verwendet.
  2. Definitionsbegriff
    – Dieses Element wurde derzeit in der Definitionsliste verwendet und verfügt über die Inline-Daten oder den Wert des dl-Elements.
  3. Definitionsbeschreibung
    – Dieses Element definiert, dass die Daten unter diesem Element auf Blockebene oder entweder inline übernommen werden.

HTML-Beschreibungslisten-Tags

Eine Beschreibungsliste ist einer der Listentypen; Sie gelten als generische Form einer geordneten Aufzählungsliste. Der einzige Unterschied besteht darin, dass kein Aufzählungszeichen-Symbol vorhanden ist.

Hinweis: Jede Definitionsliste besteht aus einer Sequenz von
Kombinationen/Eins-zu-viele-Beziehungskombinationen. Diese Beschreibungs-Tags werden in HTML4 unterstützt und in HTML5 um neue Begriffe als weitere Name-Wert-Paare erweitert. Es stellt eine Assoziationsverbindung zwischen Frage und Antworten her.

Typ 1: Einzelner Definitionsbegriff und Definition zusammen

Beispiel #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>
Nach dem Login kopieren

Ausgabe:

HTML-Beschreibungsliste

Beispiel #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>
Nach dem Login kopieren

Ausgabe:
HTML-Beschreibungsliste

Typ 2: Einzelne Beschreibung zusammen mit mehreren Begriffen

Beispiel Nr. 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>
Nach dem Login kopieren

Ausgabe:

HTML-Beschreibungsliste

Als nächstes verwenden wir das Attribut „lang“ im

wobei die Begriffe unterschiedliche Sprachen verwenden. Diese Attribute geben den ISO-Sprachcode als aus zwei Buchstaben bestehenden Wert aus.

Beispiel Nr. 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>
Nach dem Login kopieren

Ausgabe:

HTML-Beschreibungsliste

Typ 3: Einzelner Begriff, der mehrere Beschreibungen beschreibt

Beispiel

<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>
Nach dem Login kopieren

Ausgabe: 

HTML-Beschreibungsliste

Typ 4: Mehrere Begriffe und mehrere Beschreibungen

Beispiel

<!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>
Nach dem Login kopieren

Ausgabe: 

HTML-Beschreibungsliste

Typ 5: Definitionsliste mit Stilattribut

Hier wird das Stilattribut für die Farben angegeben, um die Beschreibungsbegriffe hervorzuheben.

Beispiel #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>
Nach dem Login kopieren

Ausgabe:

HTML-Beschreibungsliste

Mit dem Tag, es wird davon ausgegangen, dass der benachbarte Text als Definition des Begriffs zugewiesen wird.

Beispiel #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>
Nach dem Login kopieren

Ausgabe:

HTML-Beschreibungsliste

Typ 6: Hintergrundfarbe für die Beschreibungsliste platzieren

Die folgenden Beispiele zeigen den Inhalt mit Hintergrundfarbe unter Verwendung des Attributs „bgcolor“.

Beispiel

<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>
Nach dem Login kopieren

Ausgabe:

HTML-Beschreibungsliste

Fazit – HTML-Beschreibungsliste

Wir hoffen, dass dieser Artikel über Definitionslisten oder auch Glossarlisten als Leitfaden dienen kann, um einige der verfügbaren Verwendungsmöglichkeiten von Definitionslisten aufzuzeigen. Wir haben ein grundlegendes Verständnis dafür gesehen, wie diese genutzt werden können, um eine nützliche Zusammenarbeit zwischen Informationsschnipseln zu entwickeln. Das Google-Glossar zeigt beispielsweise, wie aussagekräftige Informationen markiert und auf vielfältige Weise auf einer Webseite verwendet werden können. Sie verfügen über zukünftige Funktionen, bei denen einige Websites Semantik verwenden, um ihre Daten attraktiver zu gestalten und die bereitgestellten Informationen so einfach und flexibel wiederzuverwenden.

Das obige ist der detaillierte Inhalt vonHTML-Beschreibungsliste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage