HTML5的summary标签怎么用？如何搭配details设置展开标题

HTML5提供了details和summary两个原生结构标签，能够实现无需JavaScript的内容展开折叠功能，其中summary标签专门用于定义details元素的展开标题，用户点击标题就能切换内部内容的显示状态。

summary标签的基础特性

summary是HTML5新增的结构标签，有两个核心特性需要了解：

• summary必须是details标签的直接子元素，不能单独使用
• 如果details内部没有summary，浏览器会默认显示“详细信息”作为展开标题

基础使用方式

最简单的搭配用法是将summary放在details标签内部的第一位，后续内容就是默认折叠的内容：

<details>
  <summary>点击展开查看基础信息</summary>
  <p>这是折叠区域的内容，默认不会显示，点击标题后才会展开</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</details>

设置默认展开状态

如果需要页面加载时默认展开内容，只需要给details标签添加open属性即可，此时summary的标题会显示展开状态，内容也会直接显示：

<details open>
  <summary>默认展开的内容标题</summary>
  <p>这个区域的内容在页面加载时就会直接显示，不需要用户点击</p>
</details>

自定义展开标题样式

summary标签支持常规的CSS样式设置，我们可以通过样式自定义标题的显示效果，比如修改颜色、字体大小、添加图标等：

<style>
  .custom-summary {
    color: #2c3e50;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 0;
    cursor: pointer;
  }
  /* 修改展开折叠的小三角样式 */
  details > summary::-webkit-details-marker {
    color: #3498db;
  }
</style>

<details>
  <summary class="custom-summary">自定义样式的展开标题</summary>
  <p>这里是自定义样式后的折叠内容区域</p>
</details>

常见使用场景

summary搭配details的使用场景非常广泛：

• FAQ常见问题解答页面，每个问题作为summary，答案作为折叠内容
• 商品详情页的参数说明、售后政策等次要信息折叠展示
• 后台管理系统的配置项分组，默认折叠不常用配置

注意事项

summary标签内部可以放置其他行内元素，比如<span>、<img>等，但不能放置块级元素作为直接子元素，否则可能导致显示异常。

另外，details和summary的兼容性覆盖了所有现代浏览器，包括Chrome、Firefox、Safari、Edge等，不需要担心旧版本浏览器的适配问题，可以放心在项目中使用。

summarydetailsHTML5_结构标签展开折叠修改时间：2026-06-28 23:36:24