【HTML教程】HTML的summary标签|html入门知识
时间: 2025-03-25 22:26:24 浏览次数：28
常用的html标签汇总、以及操作过程中的一些bug问题解决方法，以下龙腾飞网络科技-小吴在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就查询搜索一下，实践出真章，做多了自然就熟悉了：【定义和用法】summary标签为 details元素 定义了一个可见的标
常用的html标签汇总、以及操作过程中的一些bug问题解决方法，以下龙腾飞网络科技-小吴在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就查询搜索一下，实践出真章，做多了自然就熟悉了：
【定义和用法】
summary标签为 details元素 定义了一个可见的标题。点击标题可以查看/隐藏详细信息。
注意：summary元素应该是 details元素 的第一个子元素。
【实例】
例子 1
使用 summary元素：
<details> <summary>龙腾飞网络科技</summary> <p>龙腾飞网络科技致力于建立企业发展无缝对接的服务体系！</p></details>
例子 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>龙腾飞网络科技</summary>
<p>龙腾飞网络科技致力于建立企业发展无缝对接的服务体系！</p></details>
</body></html>【默认的 CSS 设置】
大多数浏览器将使用以下默认值显示 summary元素：
summary {
display: block;}