HTML <summary> 标签
示例
使用 <summary> 元素
<details>
<summary>未来世界中心</summary>
<p>未来世界中心是华特迪士尼世界度假区的一个主题公园，拥有激动人心的景点、国际展馆、屡获殊荣的烟花表演和季节性特别活动。</p>
</details>
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
<summary> 标签定义了 <details> 元素的可见标题。点击标题可以查看/隐藏详细信息。
注意：<summary> 元素应该是 <details> 元素的第一个子元素。
浏览器支持
表格中的数字表示完全支持该元素的首个浏览器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <summary> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
全局属性
<summary> 标签还支持 HTML 中的全局属性。
事件属性
<summary> 标签还支持 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>未来世界中心</summary>
<p>未来世界中心是华特迪士尼世界度假区的一个主题公园，拥有激动人心的景点、国际展馆、屡获殊荣的烟花表演和季节性特别活动。</p>
</details>
</body>
</html>
自己动手试一试 »
相关页面
HTML DOM 参考：Summary 对象
默认 CSS 设置
大多数浏览器将以以下默认值显示 <summary> 元素
summary {
display: block;
}
