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

打印页面