Etiqueta <summary> HTML

定义和用法

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

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

另请参阅：

HTML DOM 参考手册：Summary 对象

实例

例子 1

使用 <summary> Elemento:

<details>
  <summary>Centro del Mundo Futuro (Epcot Center)</summary>
  <p>Epcot es un parque temático del complejo de vacaciones de Walt Disney World, que cuenta con atracciones emocionantes, exposiciones internacionales, fuegos artificiales galardonados y actividades estacionales.</p>
</details>

Prueba por ti mismo

例子 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 Mundo Futuro (Epcot Center)</summary>
  <p>Epcot es un parque temático del complejo de vacaciones de Walt Disney World, que cuenta con atracciones emocionantes, exposiciones internacionales, fuegos artificiales galardonados y actividades estacionales.</p>
</details>
</body>
</html>

Prueba por ti mismo

Atributos globales

<summary> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<summary> La etiqueta también admite Atributos de eventos en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los valores siguientes por defecto <summary> Elemento:

summary {
  display: block;
}

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

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