HTML5 |

标签

简介

<details> 标签是 HTML5 新增的标签，用于创建一个具有可展示/隐藏内容的小部件。当 <summary> 元素被点击时，<details> 元素中的内容将展开/折叠显示。

使用方式

<details> 标签使用示例：

<details>
  <summary>展开/折叠内容</summary>
  <!-- 可展开/折叠显示的内容 -->
</details>

<details> 标签包含两个主要的元素：<summary> 和 <div>。其中 <summary> 是 <details> 元素显示的标题，点击它将切换可展开/折叠的内容。<div> 元素则包含了可展开/折叠显示的具体内容。

除了 <summary> 和 <div> 元素之外，<details> 标签还可以包含其他的标签，例如文本、图片、列表等。

注意：<summary> 元素应该在 <details> 元素的开头。没有 <summary> 元素的 <details> 元素将不能在页面上呈现出来。

属性和方法

<details> 标签具有以下属性和方法：

属性

• open：可选属性，表示 <details> 元素的默认状态是否为展开。如果设置为 open，则 <details> 元素默认展开显示；否则默认折叠隐藏。

方法

<details> 标签没有定义任何方法。

浏览器支持性

<details> 标签目前被所有主流的现代浏览器所支持，包括：

• Google Chrome
• Mozilla Firefox
• Apple Safari
• Microsoft Edge
• Opera

示例

下面是 <details> 标签的一个示例。请点击下面的标题文字，查看效果：

点击展开/折叠

添加一个标题

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu ligula sit amet purus aliquet venenatis. Vivamus vel odio eget nulla feugiat interdum non non nibh. Etiam nec finibus augue, ac consequat justo. Donec placerat velit non ante pharetra, at venenatis magna consectetur. Aliquam tempor varius enim, eu hendrerit dolor eleifend vel.

添加一段文本

Proin pharetra odio id tellus ultrices euismod. Donec mattis, erat quis est molestie, metus augue consequat dolor, vel molestie enim sem vel elit. Donec volutpat libero eros, eget tincidunt est rhoncus quis. Sed convallis laoreet neque sit amet ultricies. Donec nec convallis elit. Donec mattis libero metus, et sodales tellus vehicula laoreet.

添加一个列表

• 第一项
• 第二项
• 第三项

添加一张图片

以上是 <details> 标签的使用方法和示例，请尝试在自己的网站中使用它，为用户提供更好的可交互性体验。