<summary>: 摘要标签
最后更新：2026-10-13
<summary>摘要标签
作为 details 的第一个子元素，是用户点击以展开/折叠的可见标题。
| 分类 | 语义化 |
|---|---|
| 内容模型 | 仅可作为 details 的第一个子元素 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 需要 </summary> 标签 |
| 状态 | 标准 |
📝 语法
<summary>摘要标题</summary>▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <summary> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： summary 必须紧跟在 details 内且作为第一个子元素；不加 summary 时浏览器自动生成“详细信息”。
❓ 常见问题
Qsummary 只能用在 details 里吗？
A是的，
<summary> 只能作为 <details> 的第一个子元素使用，单独出现无意义。它是折叠面板的「标题栏」，点击展开收起的行为由浏览器原生提供，无需 JS。Qsummary 里可以放标题和图标吗？
A可以。
<summary> 允许标题与短语级内容，如 <summary><h3>条款一</h3></summary>，也可放 <span> 图标。注意它会覆盖浏览器默认的三角形指示器，箭头需自行补充。Qsummary 的默认三角箭头怎么去掉？
A用 CSS：
summary { list-style: none; }，WebKit 内核再加 summary::-webkit-details-marker { display: none; }。之后可用 ::before/::after 自定义指示符，并配合 details[open] 切换箭头方向。🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
