HTML summary 标签

HTML summary 语法

在 HTML 中，summary 标签用于指定 details 标签的 “标题部分” 。

语法：

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

说明：

details 标签会创建一个可以 “展开” 和 “折叠” 的组件。该组件只有在被展开时，它才会显示内含的信息。而 summary 标签定义的是 details 标签的 “标题部分” 。

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

HTML summary 摘要

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

HTML summary 示例

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

示例 1：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>
    </details>
</body>
</html>

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

HTML summary标签示例效果-1

HTML summary标签示例效果-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 summary标签示例效果-3

HTML summary标签示例效果-4

分析：

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