当前位置：首页 > article >正文

＜details＞和＜summary＞标签的用途，如何使用它们实现可折叠内容

article 2025/3/24 6:13:01

大白话和标签的用途，如何使用它们实现可折叠内容

`<details>` 和 `<summary>` 标签用途

<details> 和 <summary> 标签是 HTML 里的实用标签，二者配合能创建出可折叠内容。

<details> 标签就像是一个容器，能把那些不想一开始就展示给用户的内容收纳起来。
<summary> 标签则是用来设定一个标题，用户点击这个标题时，<details> 标签里藏着的内容就会显示出来；再点击一次，内容又会收回去。

如何使用它们实现可折叠内容

以下是一个简单的示例，并且代码里添加了注释，方便你理解：

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 设定文档的字符编码为 UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置页面在移动设备上的显示方式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 给页面添加一个标题 -->
    <title>可折叠内容示例</title>
</head>

<body>
    <!-- 使用 details 标签创建一个可折叠区域 -->
    <details>
        <!-- summary 标签用来设置可折叠区域的标题 -->
        <summary>点击查看更多信息</summary>
        <!-- 这里是折叠区域展开后显示的内容 -->
        <p>这是隐藏的详细信息，当你点击上面的标题时，这段内容就会显示出来。</p>
    </details>
</body>

</html>

代码解释

HTML 文档结构：最开始的 <!DOCTYPE html> 表明这是一个 HTML5 文档。<html> 标签是整个文档的根标签，其中 <head> 部分包含了文档的元数据，像字符编码、页面标题等；<body> 部分则是页面实际显示的内容。
<details> 标签：这是一个容器标签，把要折叠的内容都包在里面。
<summary> 标签：它是 <details> 标签的子标签，用来设置一个标题，用户点击这个标题就能控制 <details> 里内容的显示与隐藏。
折叠内容：在 <summary> 标签之后的内容（比如上面例子里的 <p> 标签内容），就是折叠起来的详细信息，默认情况下是隐藏的，点击标题才会显示。

通过这种方式，你就能轻松创建出可折叠内容，优化页面布局，让用户自主选择是否查看详细信息。

和标签在不同浏览器中的兼容性如何？

<details> 和 <summary> 标签在现代主流浏览器中具有较好的兼容性，但在一些旧版本浏览器或特定浏览器中可能存在一定的差异：

Chrome浏览器：从Chrome 34版本开始支持 <details> 和 <summary> 标签，在最新版本的Chrome浏览器中，对这两个标签的支持非常好，能够完美地呈现可折叠内容的效果，包括动画过渡和交互行为等。
Firefox浏览器：从Firefox 23版本开始支持，当前版本中，其对这两个标签的兼容性也很不错，能正常显示和实现可折叠功能，与Chrome类似，能很好地支持相关的CSS样式和交互特性。
Safari浏览器：从Safari 6.1版本开始支持，在最新的Safari版本中，对 <details> 和 <summary> 标签的支持较为稳定，可折叠内容的展示和交互都能正常工作，不过在某些CSS样式的渲染上可能与Chrome、Firefox有细微差别，但不影响基本功能。
Edge浏览器：旧版本的Edge浏览器对这两个标签的支持不太理想，但从Edge 79版本开始，基于Chromium内核进行了重构，对 <details> 和 <summary> 标签的支持得到了极大的提升，在最新版本中与Chrome浏览器的兼容性表现相近，能够很好地支持这些标签的各种特性。
Internet Explorer浏览器：IE浏览器对 <details> 和 <summary> 标签的支持存在问题，IE11及以下版本均不支持这两个标签。如果需要兼容IE浏览器，可能需要使用JavaScript或其他替代方案来实现类似的可折叠效果。