码农教程 - 一技在手,衣食无忧! tools

HTML <details> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

指定用户可以按需打开和关闭的详细信息：

<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>
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个<details>标签指定用户可以根据需要打开和关闭的附加详细信息。

这个<details>标签通常用于创建用户可以打开和关闭的交互式小部件。默认情况下，该小部件是关闭的。打开时，它会展开并显示其中的内容。

任何类型的内容都可以放入<details>标签。

提示：这个<摘要>标签与<details>指定详细信息的可见标题。

浏览器支持

表中的数字指定完全支持该元素的第一个浏览器版本。

Element
<details> 12.0 79.0 49.0 6.0 15.0

属性

Attribute Value Description
open open Specifies that the details should be visible (open) to the user

全局属性

这个<details>标签还支持HTML 中的全局属性。

事件属性

这个<details>标签还支持HTML 中的事件属性。

更多示例

示例

使用 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>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>
亲自试一试 »

相关页面

HTML DOM 参考：详细信息对象

默认 CSS 设置

大多数浏览器都会显示<details>具有以下默认值的元素：

details {
  display: block;
}

❮上一节 完整的 HTML参考 下一节❯