HTML - details 标签

HTML <details> 标签用于创建包含一些信息的披露小部件，当小部件切换到打开状态时可见。应使用 HTML <summary> 标签提供摘要（或标签）。

在屏幕上使用一个小的黑色三角形表示披露小部件，该三角形旋转以指示打开和关闭状态，三角形旁边有标签。摘要的内容用作披露小部件的标签。

语法


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

属性

<details> 标签支持 HTML 的全局属性和事件属性。也接受下面列出的特定属性。

属性	值	描述
open	open	指定披露小组件是否打开状态，默认情况下它处于关闭状态。

<details> 标签的示例

下面的示例将说明<details> 标签的用法。在何处、何时以及如何使用<details> 标签来创建任何网站的详细信息元素。

创建 <details> 标签元素

以下程序显示了 <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' 属性来设置网页加载后应可见的详细信息内容。


<!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> 标签的披露小部件

让我们看一下以下示例，我们正在创建一个披露小部件，使用 <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>

支持的浏览器

浏览器
是否支持	12.0	79.0	49.0	6.0	15.0

打印本页