LabEx
AnmeldenKostenlos beitreten

HTML-Beschreibungliste

HTMLHTMLBeginner
Jetzt üben

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In HTML gibt es ein spezielles Tag namens <dl>, das dazu verwendet wird, eine Beschreibungliste zu definieren. Dieser Art von Liste wird normalerweise erstellt, um Begriffe und ihre Definitionen zu erklären oder um eine kurze Erklärung eines Produkts oder Dienstleistungsangebots zu geben. In diesem Lab werden Sie lernen, wie Sie das <dl>-Tag verwenden, um Ihre eigene Beschreibungliste in HTML zu erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Setzen Sie die HTML-Datei auf

Erstellen Sie eine neue HTML-Datei namens index.html. Fügen Sie die grundlegende HTML-Struktur und einen Titel für Ihre Seite hinzu.

<!doctype html>
<html>
  <head>
    <title>Meine Beschreibungliste</title>
  </head>
  <body></body>
</html>

Erstellen Sie eine Beschreibungliste mit dem <dl>-Tag

Innerhalb des Körpers Ihrer HTML-Datei erstellen Sie eine Beschreibungliste mit dem <dl>-Tag. Das <dl>-Tag muss mit dem <dt>-Tag, das den definierten Begriff darstellt, und dem <dd>-Tag, das die Definition des Begriffes darstellt, paarweise verwendet werden.

<dl>
  <dt>Termin 1</dt>
  <dd>Definition 1</dd>
  <dt>Termin 2</dt>
  <dd>Definition 2</dd>
</dl>

Fügen Sie der Beschreibungliste eine Formatierung hinzu

Um die Beschreibungliste besser aussehen zu lassen, fügen Sie ihr einige CSS-Formatierungen hinzu. In diesem Beispiel werden wir die Außenränder und Innenabstände auf Null setzen und dann einigen Innenabstand zum <dt>-Tag hinzufügen, um es hervorzuheben.

<style>
  dl {
    margin: 0;
    padding: 0;
  }
  dt {
    padding: 10px;
    font-weight: bold;
  }
</style>

Fügen Sie Inhalte zur Beschreibungliste hinzu

Jetzt, da Sie eine grundlegende Beschreibungliste eingerichtet haben, können Sie beginnen, Ihre eigenen Inhalte hinzuzufügen. Fügen Sie einfach neue <dt>- und <dd>-Paare zur Liste für jeden Begriff und jede Definition hinzu.

<dl>
  <dt>HTML</dt>
  <dd>
    HyperText Markup Language, die Standard-Markup-Sprache, mit der man
    Webanwendungen erstellt
  </dd>
  <dt>CSS</dt>
  <dd>
    Cascading Style Sheets, eine Sprache, die zur Beschreibung der Präsentation
    eines in HTML geschriebenen Dokuments verwendet wird
  </dd>
  <dt>JavaScript</dt>
  <dd>
    Eine Programmiersprache, die hauptsächlich zur Entwicklung von
    Webanwendungen verwendet wird
  </dd>
</dl>

Speichern Sie Ihre index.html-Datei und öffnen Sie sie anschließend in einem Webbrowser, um Ihre neue Beschreibungliste anzuzeigen.

Zusammenfassung

In diesem Lab haben Sie gelernt, wie man das <dl>-Tag in HTML verwendet, um eine Beschreibungliste mit Begriffen und Definitionen zu erstellen. Mit den <dt>- und <dd>-Tags konnten Sie Ihre Begriffe definieren und für jeden eine Erklärung geben. Sie haben auch gelernt, wie man einigen einfachen CSS-Formatierungen Ihrer Beschreibungliste hinzufügt, um sie auf der Webseite besser aussehen zu lassen.

Verwandt HTML Kurse
HTML für Anfänger

HTML für Anfänger

HTML
Anfänger
Schnellstart mit HTML

Schnellstart mit HTML

HTML
Anfänger
Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

HTMLCSSJavaScript
Anfänger