HTML details 标签

HTML details 语法

在 HTML 中，details 标签用于创建一个可以点击 “展开” 和 “折叠” 的内容块，非常适合用来显示一些 “隐藏信息” 或 “补充内容”，比如常见问题、阅读更多、技术细节说明等。

语法：

<details>
    <summary>摘要内容</summary>
    ……
</details>

说明：

details 标签通常搭配 summary 标签一起使用。summary 标签是 details 的标题部分，它会始终显示。在 details 标签内，除了 summary 标签的内容之外，其他所有内容默认是不显示的。

details 标签支持以下属性。

open（可选）：如果加上该属性，内容区域在页面加载时默认就是展开状态。
ontoggle（可选）：当 details 的状态发生变化（无论是展开还是折叠）时，都会触发 toggle 事件。

注意: details 标签通常搭配 summary 标签一起使用，并且它的第一个元素必须是 summary。

HTML details 摘要

属于	HTML 标签
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

HTML details 示例

接下来，我们通过一个简单的例子来讲解一下 HTML details 标签是如何使用的。

示例 1：details 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        details { width: 400px; }
    </style>
</head>
<body>
    <details>
        <summary>查看详情</summary>
        <p> HTML：全称“Hyper Text Markup Language（超文本标记语言）”，它用于定义网页的结构。</p>
    </details>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当点击【查看详情】时，页面效果如下图 2 所示。

HTML detail标签示例效果-1

HTML detail标签示例效果-2

分析：

默认情况下，details 标签内只会显示 summary 的内容。只有点击 summary 之后，才会显示其他内容。

示例 2：details 标签只会显示 summary 内容

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        details { width: 400px; }
    </style>
</head>
<body>
    <details>
        <summary>查看详情</summary>
        <p>HTML：全称“Hyper Text Markup Language（超文本标记语言）”，它用于定义网页的结构。</p>
        <p>CSS：全称“Cascading Style Sheet（层叠样式表），它用于定义网页的样式。</p>
        <p>JavaScript：是一门编程语言，它用于定义网页的行为。</p>
    </details>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当点击【查看详情】时，页面效果如下图 2 所示。

HTML detail标签示例效果-3

HTML detail标签示例效果-4

分析：

从上面可以看出，details 标签内除了 summary 标签之外，其他所有内容都会作为隐藏的内容。

示例 3：details 标签的 open 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        details { width: 400px; }
    </style>
</head>
<body>
    <details open>
        <summary>查看详情</summary>
        <p>HTML：全称“Hyper Text Markup Language（超文本标记语言）”，它用于定义网页的结构。</p>
    </details>
</body>
</html>

页面效果如下图所示。

HTML details标签open属性