<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>