Tag HTML <summary>

定义和用法

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

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

另请参阅：

HTML DOM 参考手册：Summary 对象

实例

例子 1

使用 <summary> Elemento:

<details>
  <summary>Centro del Mondo Futuro (Epcot Center)</summary>
  <p>Epcot è un parco tematico del Walt Disney World Resort, con attrazioni entusiasmanti, padiglioni internazionali, fuochi d'artificio premiati e attività stagionali.</p>
</details>

Prova tu stesso

例子 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>Centro del Mondo Futuro (Epcot Center)</summary>
  <p>Epcot è un parco tematico del Walt Disney World Resort, con attrazioni entusiasmanti, padiglioni internazionali, fuochi d'artificio premiati e attività stagionali.</p>
</details>
</body>
</html>

Prova tu stesso

Proprietà globali

<summary> Il tag supporta anche Proprietà globali in HTML.

Proprietà degli eventi

<summary> Il tag supporta anche Proprietà degli eventi in HTML.

Impostazioni CSS predefinite

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per visualizzare <summary> Elemento:

summary {
  display: block;
}

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta per la prima volta questa proprietà.

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