HTML - summary 标签_HTML 菜鸟教程

HTML <summary> 标签用于指定详细信息元素披露框的摘要、标题或图例。

它在 details 元素中使用。当用户单击<summary>时，它会切换父元素的状态 <details> 打开和关闭。<summary>元素内容可以是段落内可以使用的任何标题内容、纯文本或 HTML。

默认切换状态为 closed（无论您是否使用 close 属性）。您还可以更改要显示的样式：块以移除显示三角形。

语法

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

属性

<summary> 标签支持 HTML 的全局属性和事件属性。

<summary> 标签示例

下面的示例将说明<summary> 标签的用法。在何处、何时以及如何使用<summary> 标签。

实现 <summary> 标签元素

以下示例显示了 HTML <summary> 标签在“details”元素中的用法。

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

<summary> 标签的列表形式

以下是 <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 来设置创建的“摘要”元素的样式。

<!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 - dialog 标签 HTML - data 标签 >>