HTML5中的<details>标签用于创建一个可以展开或收起的详细内容区域。它通常与<summary>元素一起使用,<summary>用于提供标题或标签,而<details>包含详细的内容,用户可以点击标题来切换详细内容的可见性。

以下是<details>和<summary>标签的基本用法:
<details>
  <summary>详细信息</summary>
  <p>这是详细信息的内容。</p>
</details>

在这个例子中,<details>标签包含一个<summary>标签和详细内容的段落(<p>)。用户可以点击"详细信息"来展开或收起段落。

你也可以在<details>内放置其他HTML元素、文本、图像等,以展示更复杂的内容。
<details>
  <summary>更多信息</summary>
  <ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
  </ul>
</details>

在这个例子中,详细内容包含一个无序列表。用户点击"更多信息"标题将显示或隐藏列表。

这个标签使得可以更优雅地处理需要隐藏或展示额外信息的场景,而不需要使用JavaScript或CSS来实现。


转载请注明出处:http://www.zyzy.cn/article/detail/3719/HTML5