💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken
Im HTML wird das <summary>-Tag verwendet, um ein expandierbares und zusammenziehbares Zusammenfassungs-Element für den im Webbrowser enthaltenen Inhalt zu erstellen.
Hinweis: Sie können im
index.htmlprogrammieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie im unteren rechten Eck auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.
<details>-TagsBevor wir das <summary>-Tag hinzufügen, müssen wir einen Inhaltsbereich erstellen, der expandiert oder zusammengefasst werden kann. Dazu verwenden wir das <details>-Tag. Fügen Sie folgenden Code in der index.html-Datei innerhalb des <body>-Tags hinzu.
<details>
<summary>Klicken Sie hier, um den Inhalt anzuzeigen</summary>
<p>Der Inhalt steht hier.</p>
</details>Im obigen Code haben wir ein Zusammenfassungs-Tag innerhalb des Details-Tags hinzugefügt, um den Inhalt zu definieren.
aria-expanded-AttributsWir können ein aria-expanded-Attribut zum Details-Tag hinzufügen, um den aktuellen Zustand des Inhalts anzugeben. Wenn der Inhalt expandiert ist, wird der Wert von aria-expanded true sein, und wenn er zusammengefasst ist, wird der Wert false sein. Fügen Sie folgenden Code nach dem <summary>-Tag hinzu, um das aria-expanded-Attribut zu verwenden.
<details>
<summary aria-expanded="false">
Klicken Sie hier, um den Inhalt anzuzeigen
</summary>
<p>Der Inhalt steht hier.</p>
</details>Das summary-Tag hat keine speziellen Attribute, aber wir können es mit CSS gestalten. Fügen Sie folgenden Code im <style>-Tag hinzu, um dem summary-Tag einige Gestaltung hinzuzufügen.
summary {
padding: 10px;
background-color: #eee;
cursor: pointer;
}Wir können mehr Inhalt innerhalb des details-Tags hinzufügen, und er wird automatisch expandierbar und zusammenziehbar sein. Fügen Sie folgenden Code nach dem ersten Absatz hinzu, um mehr Inhalt hinzuzufügen.
<details>
<summary aria-expanded="false">
Klicken Sie hier, um den Inhalt anzuzeigen
</summary>
<p>Der Inhalt steht hier.</p>
<p>Weiterer Inhalt.</p>
<ul>
<li>Listeintrag 1</li>
<li>Listeintrag 2</li>
</ul>
</details>Wir können mehreren expandierbaren Abschnitte zur Webseite hinzufügen. Fügen Sie folgenden Code hinzu, um einen weiteren expandierbaren Abschnitt zu erstellen.
<details>
<summary aria-expanded="false">Ein weiterer Abschnitt</summary>
<p>Inhalt des weiteren Abschnitts</p>
</details>Das <summary>-Tag kann verwendet werden, um expandierbare und zusammenziehbare Inhaltsabschnitte auf einer Webseite zu erstellen. Wir können mehr Inhalt innerhalb des details-Tags hinzufügen und die Gestaltung verwenden, um das Aussehen des summary-Tags anzupassen. Indem wir das aria-expanded-Attribut hinzufügen, können wir den aktuellen Zustand des Inhalts angeben und ihn für behinderte Benutzer zugänglich machen.
