<summary>：Disclosure Summary 元素

此元素仅包含 全局属性。

<summary> 元素的内容可以是任何标题内容、纯文本或可以在段落中使用的 HTML。

<summary> 元素只能用作 <details> 元素的第一个子元素。当用户点击摘要时，父 <details> 元素会切换为打开或关闭状态，然后一个 toggle 事件会发送到 <details> 元素，这可以用来让你知道此状态更改何时发生。

<details> 的内容为 <summary> 提供 可访问的描述。

如果 <details> 元素的第一个子元素不是 <summary> 元素，则 用户代理 将使用默认字符串（通常为“详细信息”）作为显示框的标签。

根据 HTML 规范，<summary> 元素的默认样式包含 display: list-item。这使得可以更改或移除默认显示的作为 раскрывающийся виджет 旁边的图标，默认情况下通常是一个三角形。

您还可以将样式更改为 display: block 以移除 раскрывающийся 三角形。

有关详细信息，请参阅 浏览器兼容性 部分，因为并非所有浏览器都支持此元素的完整功能。

对于基于 Webkit 的浏览器（如 Safari），可以通过非标准 CSS 伪元素 ::-webkit-details-marker 控制图标显示。要移除 раскрывающийся 三角形，请使用 summary::-webkit-details-marker { display: none }。

下面是一些显示 <summary> 用法的示例。您可以在 <details> 元素的文档中找到更多示例。

一个简单的示例，展示了在 <details> 元素中使用 <summary> 的方法

<details open>
  <summary>Overview</summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

结果

您可以在 <summary> 中使用标题元素，如下所示

<details open>
  <summary><h4>Overview</h4></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

结果

目前存在一些间距问题，可以使用 CSS 解决。

此示例向 <summary> 元素添加了一些语义，以指示标签很重要

<details open>
  <summary><strong>Overview</strong></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

结果

• <details>