HTML <summary> Tag

定义和用法

<summary> 标签为 <details> 元素 定义了一个可见的标题。点击标题可以查看/隐藏详细信息。

注意:<summary> 元素应该是 <details> 元素 的第一个子元素。

另请参阅:

HTML DOM 参考手册:Summary 对象

实例

例子 1

使用 <summary> Element:

<details>
  <summary>Future World Center (Epcot Center)</summary>
  <p>Epcot ist ein Themenpark im Walt Disney World Resort und bietet aufregende Attraktionen, internationale Pavillons, mehrfach ausgezeichnete Feuerwerke und saisonale Veranstaltungen.</p>
</details>

Versuchen Sie es selbst

例子 2

使用 CSS 设置 <details> 和 <summary> 的样式:

<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>Future World Center (Epcot Center)</summary>
  <p>Epcot ist ein Themenpark im Walt Disney World Resort und bietet aufregende Attraktionen, internationale Pavillons, mehrfach ausgezeichnete Feuerwerke und saisonale Veranstaltungen.</p>
</details>
</body>
</html>

Versuchen Sie es selbst

Globale Attribute

<summary> Der Tag unterstützt auch Globale Attribute in HTML.

Ereignisattribute

<summary> Der Tag unterstützt auch Ereignisattribute in HTML.

Standardmäßige CSS-Einstellungen

Die meisten Browser zeigen die folgenden Standardwerte an <summary> Element:

summary {
  display: block;
}

Browserkompatibilität

Die Zahlen in der Tabelle zeigen die Versionsnummer des ersten Browsers, der diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0