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;
}