HTML <details> 标签

HTML <details> 标签用于创建一个可折叠的详情部分，用户可以点击展开或收起。这个标签通常与 <summary> 标签一同使用，用来为详情部分提供一个标题或摘要。

基本语法

<details>
  <summary>标题文字</summary>
  详细内容...
</details>

• <details> 标签包含了整个可折叠的区域。
• <summary> 标签定义了一个可点击的标题，用户可以通过点击这个标题来展开或收起详情部分。如果省略 <summary> 标签，浏览器会使用默认的文字（例如 "Details"）作为标题。
• 在 <details> 和 <summary> 标签之间的内容将被隐藏起来，直到用户点击 <summary> 标签展开它。

示例

下面是一个简单的示例：

<details>
  <summary>关于 HTML</summary>
  <p>HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它使得浏览器能够正确地显示网页内容。</p>
</details>

在上面的例子中，"关于 HTML" 将作为可点击的标题展示出来。当用户点击这个标题时，下面的段落内容将会显示或隐藏。

浏览器支持

<details> 标签在所有现代浏览器中都得到了广泛支持，包括 Chrome、Firefox、Safari 和 Edge。然而，在 Internet Explorer 11 及更早版本的浏览器中不被支持。

总结

HTML <details> 标签是一个非常有用的工具，可以让你创建可折叠的内容部分，从而提高网页的可读性和用户体验。希望这个教程能够帮助您更好地理解和使用 <details> 标签！