HTML <opsomming> Merker
Voorbeeld
Gebruik die <summary> element:
<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>
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die <summary>
merker definieer 'n sigbare opskrif vir die <details> element. Die opskrif kan geklik word om die besonderhede te sien/versteek.
Let wel: Die <summary>
element moet die eerste kind element van die <details> element wees.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die element ten volle ondersteun.
Element | |||||
---|---|---|---|---|---|
<summary> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
Globale eienskappe
Die <summary>
merker ondersteun ook die Global Attributes in HTML .
Gebeurtenis eienskappe
Die <summary>
merker ondersteun ook die gebeurteniskenmerke in HTML .
Meer voorbeelde
Voorbeeld
Gebruik CSS om <details> en <summary> te styl:
<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>
Verwante bladsye
HTML DOM verwysing: Opsomming Object
Verstek CSS-instellings
Die meeste blaaiers sal die <summary>
element met die volgende verstekwaardes vertoon:
summary {
display: block;
}