HTML - <details> 標籤

HTML <details> 標籤用於建立一個包含某些資訊的顯示部件，當部件切換到開啟狀態時可見。

應使用 HTML <summary> 標籤提供摘要（或標籤）。顯示部件在螢幕上用一個小黑三角表示，該三角形旋轉以指示開啟和關閉狀態，三角形旁邊有標籤。摘要的內容用作顯示部件的標籤。

語法

<details>.....</details>

屬性

HTML style 標籤支援全域性和事件 HTML 屬性。也接受下面列出的特定屬性。

屬性	值	描述
open	open	指定顯示部件應預設開啟，預設為關閉。

HTML details 標籤示例

下面的示例將說明 details 標籤的用法。在哪裡、何時以及如何使用 details 標籤來建立任何網站的 details 元素。

建立 Details 元素

以下程式顯示了 HTML <details> 標籤的用法。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML details tag</title>
</head>
<body>
   <!--create details tag-->
   <p>Click on the below label to open the details.</p>
   <details>
      <summary>Open</summary> 
         You clicked on label(i.e. summary).
   </details>
</body>
</html>

帶有 open 屬性的 Details 元素

在這裡，我們在 'details' 元素中使用 'open' 屬性來設定網頁載入後 details 內容應可見。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML details tag</title>
</head>
<body>
   <!--create details tag-->
   <p>HTML 'details' element example.</p>
   <details open>
      <summary>Open</summary> 
         You have used the 'open' attribute, 
         so by default, it opened already.
   </details>
</body>
</html>

使用 details 標籤的顯示部件

讓我們來看下面的例子，我們正在建立一個顯示部件，使用 HTML <details> 標籤新增使用者可以切換開啟和關閉的附加資訊。我們使用 CSS 為 <details> 標籤設定樣式。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML details tag</title>
   <style>
      details {
         border: 1px solid blue;
         border-radius: 10px;
         padding: 4px;
         color: green;
      }

      details[open] {
         padding: 1px;
      }

      details[open] summary {
         border-bottom: 1px solid black;
         margin-bottom: 5px;
         color: red;
      }
   </style>
</head>
<body>
   <!--create details tag-->
   <p>HTML 'details' element example.</p>
   <details>
      <summary>Open</summary>
         A disclosure widget is represented onscreen using a 
         small black triangle that rotates to indicate open 
         and closed status, with labels next to the triangles. 
         The content of the summary is used as a label for the 
         disclosure widget.
      </details>
</body>
</html>

支援的瀏覽器

標籤
footer	支援 12.0	支援 79.0	支援 49.0	支援 6.0	支援 15.0

html_tags_reference.htm

列印頁面