HTML <summary> 标签
实例
使用 <summary> 元素：
<details>
<summary>未来世界中心</summary>
<p>Epcot 是华特迪士尼世界度假区的主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性特别活动。</p>
</details>
亲自试一试 »
<summary>未来世界中心</summary>
<p>Epcot 是华特迪士尼世界度假区的主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性特别活动。</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>Epcot 是华特迪士尼世界度假区的主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性特别活动。</p>
</details>
</body>
</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>Epcot 是华特迪士尼世界度假区的主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性特别活动。</p>
</details>
</body>
</html>
相关页面
HTML DOM 参考手册: Summary 对象
默认CSS设置
大多数浏览器将使用以下默认值显示 <summary> 元素:
summary {
display: block;
}
display: block;
}
