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