Meisterhaftigkeit in HTML Definition Listen

Einführung

In diesem Lab lernst du, wie du das HTML <dfn>-Tag verwendest, um eine Definitionenliste zu erstellen, die die definierten Begriffe hervorhebt. Das <dfn>-Tag wird in Tutorials und auf Bildungswissenschaften verwendet, um eine interaktive und informierende Benutzererfahrung zu bieten.

Hinweis: Du kannst im index.html programmieren und lernen, wie du HTML in Visual Studio Code schreibst. Klicke in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend kannst du die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70740{{"HTML Definition Begriff"}} html/head_elems -.-> lab-70740{{"HTML Definition Begriff"}} html/lists_desc -.-> lab-70740{{"HTML Definition Begriff"}} html/doc_flow -.-> lab-70740{{"HTML Definition Begriff"}} html/inter_elems -.-> lab-70740{{"HTML Definition Begriff"}} html/custom_attr -.-> lab-70740{{"HTML Definition Begriff"}} end

Einrichten der HTML-Datei

Erstellen Sie eine neue Datei namens index.html und öffnen Sie sie in Ihrem bevorzugten Code-Editor.
Fügen Sie die grundlegende HTML-Struktur Ihrer Datei hinzu.

<!doctype html>
<html>
  <head>
    <title>HTML Definition List</title>
  </head>
  <body></body>
</html>

Erstellen der Definitionenliste

Innerhalb des <body>-Elements erstellen Sie ein <dl>-Element, um Ihre Definitionenliste zu enthalten.
Innerhalb des <dl>-Elements erstellen Sie eine Reihe von Begriff- und Definitionspaaaren, indem Sie die <dt>- und <dd>-Elemente verwenden.

<body>
  <dl>
    <dt><dfn>HTML</dfn></dt>
    <dd>
      HyperText Markup Language ist die Standardsprache zum Erstellen von
      Webseiten.
    </dd>
    <dt><dfn>CSS</dfn></dt>
    <dd>
      Cascading Style Sheets wird verwendet, um die Präsentation eines in einer
      Markup-Sprache geschriebenen Dokuments zu beschreiben.
    </dd>
    <dt><dfn>JavaScript</dfn></dt>
    <dd>
      Eine Scriptsprache, die verwendet wird, um dynamischen Website-Inhalt zu
      erstellen und zu steuern.
    </dd>
  </dl>
</body>

In diesem Beispiel verwenden wir das <dfn>-Tag, um die Begriffe hervorzuheben und sie auffällig zu machen.

Um einer Tooltip zu jedem Begriff hinzuzufügen, fügen Sie ein title-Attribut innerhalb der <dfn>-Elemente hinzu.

<dt><dfn title="HyperText Markup Language">HTML</dfn></dt>
<dd>
  HyperText Markup Language ist die Standardsprache zum Erstellen von Webseiten.
</dd>

Das title-Attribut erzeugt eine Tooltip, die den vollen Begriff anzeigt, wenn der Benutzer mit der Maus darüber fährt.

Anpassen des CSS-Stils

Standardmäßig hat das <dfn>-Tag einen kursiven Schriftstil. Sie können jedoch die Stile mithilfe von CSS anpassen.
Fügen Sie die folgenden CSS-Stile Ihrer Datei hinzu.

<style>
  dfn {
    font-style: italic;
    color: blue;
  }
  dt {
    font-weight: bold;
  }
</style>

Die obigen Stile werden den Schriftstil von <dfn> auf kursiv und die Schriftfarbe auf blau setzen. Der Schriftgewicht von <dt> wird ebenfalls auf fett更改为。（这里原文有误，应该是changed to bold，翻译为更改为粗体）

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie das HTML <dfn>-Tag verwenden, um eine Definitionenliste mit hervorgehobenen Begriffen und Tooltips zu erstellen. Indem Sie das <dfn>-Tag verwenden, können Sie Ihren Bildungsinhalt interaktiver und visuell attraktiver für den Benutzer gestalten.

HTML Definition Begriff