HTML- <details> -Tag
Beispiel
Geben Sie Details an, die der Benutzer bei Bedarf öffnen und schließen kann:
<details>
<summary>Epcot Center</summary>
<p>Epcot is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</details>
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Das <details>Tag gibt zusätzliche Details an, die der Benutzer bei Bedarf öffnen und schließen kann.
Das <details>Tag wird häufig verwendet, um ein interaktives Widget zu erstellen, das der Benutzer öffnen und schließen kann. Standardmäßig ist das Widget geschlossen. Wenn es geöffnet ist, wird es erweitert und zeigt den darin enthaltenen Inhalt an.
Jede Art von Inhalt kann in das <details>Tag eingefügt werden.
Tipp: Das Tag <summary> wird in Verbindung mit verwendet <details>, um eine sichtbare Überschrift für die Details anzugeben.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Element vollständig unterstützt.
| Element | |||||
|---|---|---|---|---|---|
| <details> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
Attribute
| Attribute | Value | Description |
|---|---|---|
| open | open | Specifies that the details should be visible (open) to the user |
Globale Attribute
Das <details>Tag unterstützt auch die globalen Attribute in HTML .
Ereignisattribute
Das <details>Tag unterstützt auch die Ereignisattribute in HTML .
Mehr Beispiele
Beispiel
Verwenden Sie CSS, um <details> und <summary> zu formatieren:
<html>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney
World Resort featuring exciting attractions, international pavilions,
award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
Verwandte Seiten
HTML-DOM-Referenz: Details-Objekt
Standard-CSS-Einstellungen
Die meisten Browser zeigen das <details>Element mit den folgenden Standardwerten an:
details {
display: block;
}