---
title: <summary>
slug: Web/HTML/Element/summary
tags:
  - <summary>
  - Element
  - HTML
  - HTML5
  - Reference
  - Web
translation_of: Web/HTML/Element/summary
---
<p>{{HTMLRef}}</p>

<h2 id="概述">概述</h2>

<p><strong>HTML <code>&lt;summary&gt; </code>元素 </strong>用作 一个{{HTMLElement("details")}}元素的一个内容的摘要，标题或图例。</p>

<div class="note"><strong>提示:</strong> 如果 <code>&lt;summary&gt;</code> 元素在浏览器内不能被正确解析和渲染,，则会展示&lt;details&gt;标签内的其他内容。</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">标签闭合</th>
   <td>开始标签和结束标签都不能省略。</td>
  </tr>
  <tr>
   <th scope="row">父级元素</th>
   <td>{{ HTMLElement("summary") }}元素是{{ HTMLElement("details") }} 元素的子元素。</td>
  </tr>
  <tr>
   <th scope="row">文档规范</th>
   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element" rel="external nofollow">HTML5, section 4.11.2</a></td>
  </tr>
 </tbody>
</table>

<h2 id="属性"><strong>属性</strong></h2>

<p>本元素仅支持<a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>。</p>

<h2 id="DOM_接口">DOM 接口</h2>

<p>本元素支持 {{domxref("HTMLElement")}} 接口.</p>

<h2 id="示例">示例</h2>

<details style="color: blue; margin-left: 15px; margin-bottom: 10px;">
<p style="color: red;">In summation, get details from the link on the next line</p>
</details>

<p>请参考 {{ HTMLElement("details") }} 页面内有关 &lt;summary&gt;元素的示例.</p>

<h2 id="Specifications" name="Specifications">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div id="compat-desktop">{{Compat("html.elements.summary")}}</div>

<h2 id="参见">参见</h2>

<ul>
 <li>{{ HTMLElement("details") }}</li>
</ul>

<div class="noinclude">{{HTMLRef}}</div>