Entdecken Sie die Macht des HTML-Details-Tags

Einführung

Das HTML-Details-Tag bietet eine Möglichkeit, zusätzliche Details und Informationen zu einem beliebigen Überschriftstext anzuzeigen. Das <details>-Tag versteckt den darin enthaltenen Text standardmäßig und zeigt ihn nur an, wenn der Benutzer auf die Pfeiltaste klickt. In diesem Lab werden wir lernen, wie das HTML <details>-Tag mit einem benutzerdefinierten Zusammenfassungsabschnitt verwendet wird.

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70738{{"HTML Zusätzliche Details"}} html/doc_flow -.-> lab-70738{{"HTML Zusätzliche Details"}} html/embed_media -.-> lab-70738{{"HTML Zusätzliche Details"}} html/inter_elems -.-> lab-70738{{"HTML Zusätzliche Details"}} end

Grundlegendes `<details>`-Tag

Erstellen Sie in Ihrem bevorzugten Texteditor eine Datei namens index.html.

Kopieren Sie den folgenden Code und fügen Sie ihn in Ihre index.html-Datei ein:

<details>
  <summary>Klicken Sie, um mehr zu sehen</summary>
  <p>
    Dieser Text ist versteckt und kann durch Klicken auf die Pfeiltaste
    angezeigt werden.
  </p>
</details>

Dies ist ein einfaches Beispiel für die Verwendung des <details>-Tags. Der Text innerhalb des <details>-Tags ist standardmäßig versteckt, und der Benutzer kann ihn durch Klicken auf die Pfeiltaste anzeigen.

Benutzerdefinierter Zusammenfassungsabschnitt

Lassen Sie uns nun einen benutzerdefinierten Zusammenfassungsabschnitt für das <details>-Tag erstellen. Ändern Sie den vorhandenen Code so, dass er wie folgt aussieht:

<details>
  <summary>Lesen Sie mehr über den Autor</summary>
  <p>
    John Doe ist ein Schriftsteller, der zahlreiche Bücher in verschiedenen
    Genres veröffentlicht hat.
  </p>
</details>

Im obigen Code haben wir einen benutzerdefinierten Zusammenfassungsabschnitt "Lesen Sie mehr über den Autor" mithilfe des <summary>-Tags hinzugefügt und die Autorendetails innerhalb des <details>-Tags angegeben.

Fügen Sie ein Bild hinzu

Lassen Sie uns einem <details>-Tag ein Bild hinzufügen. Kopieren Sie den folgenden Code und fügen Sie ihn in Ihre index.html-Datei ein:

<details>
  <summary>Klicken Sie, um mehr zu sehen</summary>
  <p>
    Dieser Text ist versteckt und kann durch Klicken auf die Pfeiltaste
    angezeigt werden.
  </p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

Im obigen Code haben wir ein Bild mithilfe des <img>-Tags hinzugefügt. Wenn der Benutzer auf die Pfeiltaste klickt, werden das Bild und der Text innerhalb des <details>-Tags sichtbar.

Fügen Sie das `open`-Attribut hinzu

Lassen Sie uns nun das open-Attribut zum <details>-Tag hinzufügen, um den Text standardmäßig anzuzeigen. Ändern Sie den vorhandenen Code so, dass er wie folgt aussieht:

<details open>
  <summary>Lesen Sie mehr über den Autor</summary>
  <p>
    John Doe ist ein Schriftsteller, der zahlreiche Bücher in verschiedenen
    Genres veröffentlicht hat.
  </p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

Das open-Attribut des <details>-Tags stellt sicher, dass der Text standardmäßig auf der Webseite sichtbar ist.

Zusammenfassung

In diesem Lab haben wir gelernt, wie man das HTML <details>-Tag verwendet, um zusätzliche Details und Informationen zu einem beliebigen Überschriftstext oder normalen Text bereitzustellen. Wir haben auch gelernt, wie man benutzerdefinierte Zusammenfassungen erstellt und Bilder im <details>-Tag hinzufügt.

HTML Zusätzliche Details