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

打印页面