HTML - <summary> 標籤

HTML <summary> 標籤用於指定 <details> 元素展開框的摘要、標題或圖例。

它用於 <details> 元素內。當用戶點選<summary> 時，它會切換父元素<details> 的開啟和關閉狀態。<summary> 元素的內容可以是任何標題內容、純文字或可在段落中使用的 HTML。

預設切換狀態為關閉（無論您是否使用 close 屬性）。您也可以將樣式更改為 display: block 以移除展開三角形。

語法

<summary>.....</summary>

屬性

HTML <summary> 標籤支援全域性和事件HTML 屬性。

<summary> 標籤示例

下面的例子將說明 <summary> 標籤的用法，包括何時何地以及如何使用。

實現 <summary> 元素

以下示例顯示了在 ‘details’ 元素中使用 HTML <summary> 標籤。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML summary tag</title>
</head>
<body>
   <!--create a summary tag-->
   <p>HTML 'summary' element example..</p>
   <details>
      <summary>Read more</summary>
       It is used within the details element. 
       When a user clicked on the summary,
       it toggles the states of the parent
       element details open and closed.
       The summary element content can be any 
       heading content, plain text, or HTML 
       that can be used within a paragraph.
   </details>
</body>
</html>

列表形式的摘要

以下是 HTML <summary> 標籤的另一個示例。在這裡，我們在 <details></details> 元素內使用 <summary> 標籤來指定其摘要。然後，我們建立 HTML 列表，當用戶單擊摘要時將顯示列表。

但是，我們在 'details' 元素中使用了 'open' 屬性，因此它預設情況下將開啟。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML summary tag</title>
</head>
<body>
   <!--create a summary tag-->
   <p>HTML 'summary' element example..</p>
   <details open>
      <summary>Overview</summary>
      <ul>
      <li>Total money : 5000</li>
      <li>Cash on hand : 3570 </li>
      <li>Spended money : (5000 - 3570) = 1430</li>
      </ul>
   </details>
</body>
</html>

樣式化 <summary> 元素

在此示例中，我們使用 HTML <summary> 標籤來指定 ‘details’ 元素展開框的 ‘summary’。我們使用 CSS 來設定建立的 ‘summary’ 元素的樣式。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML summary tag</title>
   <style>
      summary {
         width: 100px;
         color: white;
         height: 30px;
         border: 2px solid black;
         border-radius: 5px;
         text-align: center;
         justify-content: center;
         background-color: green;
         cursor: pointer;
         padding-top: 10px 
      }
   </style>
</head>
<body>
   <!--create a summary tag-->
   <p>HTML 'summary' element example..</p>
   <details>
      <summary>Click me!</summary>
      <p>You clicked on click me!</p>
</body>
</html>

巢狀 <summary> 元素

讓我們來看另一個場景，我們將使用多個或巢狀的 <summary> 標籤。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML summary tag</title>
   <style>
      summary:nth-child(1) {
         color: red;
      }
   </style>
</head>
<body>
   <!--create a summary tag-->
   <p>HTML 'summary' element example..</p>
   <details open>
      <summary>Click me!</summary>
      <p>Because of 'open' attribute its opened(by default)</p>
      <details>
      <summary>click me again!</summary>
      <p>You clicked on 'click me again!'</p>
      </details>
</body>
</html>

支援的瀏覽器

標籤
嵌入	是 12.0	是 79.0	是 49.0	是 6.0	是 15.0

html_tags_reference.htm

列印頁面