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

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

article 2026/3/2 6:42:48

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

<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>

代码解释

  1. HTML 文档结构：最开始的 <!DOCTYPE html> 表明这是一个 HTML5 文档。<html> 标签是整个文档的根标签，其中 <head> 部分包含了文档的元数据，像字符编码、页面标题等；<body> 部分则是页面实际显示的内容。
  2. <details> 标签：这是一个容器标签，把要折叠的内容都包在里面。
  3. <summary> 标签：它是 <details> 标签的子标签，用来设置一个标题，用户点击这个标题就能控制 <details> 里内容的显示与隐藏。
  4. 折叠内容：在 <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或其他替代方案来实现类似的可折叠效果。

虽然大多数现代浏览器都支持 <details> 和 <summary> 标签，但在实际使用中，还是建议进行充分的测试，以确保在不同浏览器环境下都能提供一致的用户体验。如果对兼容性要求较高，可以考虑使用一些JavaScript库来实现可折叠内容，以提供更广泛的浏览器支持。

相关文章：

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

大白话和标签的用途&#xff0c;如何使用它们实现可折叠内容 <details> 和 <summary> 标签用途 <details> 和 <summary> 标签是 HTML 里的实用标签&#xff0c;二者配合能创建出可折叠内容。 <details> 标签就像是一个容器&#xff0c;能把那…...

编程日记 2025/12/25 0:58:50

HUGO介绍、安装、以及使用

HUGO官方网站&#xff0c;文章内容的简介大部分来自官网的翻译&#xff0c;官网是纯英文描述&#xff0c;英语好的可以前往官方网站&#xff0c;博主在这里简介中简单翻译处理包括一些链接的引用&#xff0c;主要是讲解一下如何安装和使用。 这里再粘贴一个三方网站opendocs.i…...

编程日记 2026/1/27 4:20:57

【STM32实物】基于STM32的太阳能充电宝设计

基于STM32的太阳能充电宝设计 演示视频： 基于STM32的太阳能充电宝设计 硬件组成： 系统硬件包括主控 STM32F103C8T6、0.96 OLED 显示屏、蜂鸣器、电源自锁开关、温度传感器 DS18B20、继电器、5 V DC 升压模块 、TB4056、18650锂电池、9 V太阳能板、稳压降压 5 V三极管。 功能…...

编程日记 2026/3/1 2:58:19

【Netty】长连接与短连接的不同实现

长连接与短连接的不同实现 配置层面 // 长连接配置 bootstrap.option(ChannelOption.SO_KEEPALIVE, true) // 启用 TCP keepalive.option(ChannelOption.TCP_NODELAY, true); // 禁用 Nagle 算法// 短连接不需要这些配置心跳机制 // 长连接需要心跳 pipeline.addLast(new Idl…...

编程日记 2026/2/5 11:03:57

安装 OpenSSL 1.1.1 的完整脚本适用于 Ubuntu 22.04 系统

#!/bin/bash # 更新系统包 sudo apt-get update # 安装编译工具和依赖库 sudo apt-get install -y build-essential checkinstall zlib1g-dev # 下载 OpenSSL 1.1.1 源码 wget https://www.openssl.org/source/openssl-1.1.1.tar.gz # 检查下载是否成功 if [ $? -ne 0 ]; …...

编程日记 2026/2/28 20:54:01

24-智慧旅游系统(协同过滤算法)

介绍 技术&#xff1a; 基于 B/S 架构 SpringBootMySQLLayuivue 环境&#xff1a; Idea mysql maven jdk1.8 管理端功能 管理端主要用于对系统内的各类旅游资源进行管理&#xff0c;包括用户信息、旅游路线、车票、景点、酒店、美食、论坛等内容。具体功能如下&#xff1a; …...

编程日记 2026/2/18 21:20:03

Vue 中的日期格式化实践：从原生 Date 到可视化展示！！！

&#x1f4c5; Vue 中的日期格式化实践&#xff1a;从原生 Date 到可视化展示 &#x1f680; 在数据可视化场景中&#xff0c;日期时间的格式化显示是一个高频需求。本文将以一个邀请码关系树组件为例&#xff0c;深入解析 Vue 中日期格式化的 核心方法、性能优化 和 最佳实践…...

编程日记 2026/2/15 8:31:48

2025年使用Scrapy和Playwright解决网页抓取挑战的方案

0. 引言 随着互联网技术的发展&#xff0c;网页内容呈现方式越来越复杂&#xff0c;大量网站使用JavaScript动态渲染内容&#xff0c;这给传统的网络爬虫带来了巨大挑战。在2025年的网络爬虫领域&#xff0c;Scrapy和Playwright的结合为我们提供了一个强大的解决方案&#xff…...

编程日记 2026/2/24 10:03:03

可靠消息投递demo

以下是一个基于 Spring Boot RocketMQ 的完整分布式事务实战 Demo&#xff0c;包含事务消息、本地事务、自动重试、死信队列&#xff08;DLQ&#xff09; 等核心机制。代码已充分注释&#xff0c;可直接运行。 一、项目结构 src/main/java ├── com.example.rocketmq │ …...

编程日记 2026/2/22 5:13:26

阻止 Mac 在运行任务时进入休眠状态

掌握Caffeinate命令&#xff1a;让您的 Mac 保持清醒以完成关键任务 开发人员经常发现自己在 Mac 上运行持续时间较长的进程。无论是大量文件上传、广泛的数据分析脚本&#xff0c;还是复杂的构建过程&#xff0c;我们最不希望的就是我们的机器在任务中途进入睡眠状态。输入 c…...

编程日记 2025/7/19 0:20:48

Copilot提示词库用法：调整自己想要的，记住常用的，分享该共用的

不论你是 Microsoft 365 Copilot 的新用户还是熟练运用的老鸟&#xff0c;不论你是使用copilot chat&#xff0c;还是在office365中使用copilot&#xff0c;copilot提示词库都将帮助你充分使用copilot这一划时代的产品。它不仅可以帮助你记住日常工作中常用的prompt提示词&…...

编程日记 2026/2/20 4:50:28

Python实战（3）-数据库操作

前面说过&#xff0c;可用的SQL数据库引擎有很多&#xff0c;它们都有相应的Python模块。这些数据库引擎大都作为服务器程序运行&#xff0c;连安装都需要有管理员权限。为降低Python DB API的使用门槛&#xff0c;我选择了一个名为SQLite的小型数据库引擎。它不需要作为独立的…...

编程日记 2026/2/20 8:25:19

LeetCode 160 Intersection Of Two Linked Lists 相交链表 Java

题目&#xff1a;找到两个相交列表的起始点&#xff0c;如图c1开始为A和B两个链表的相交点 举例1&#xff1a;8为两个链表的相交点。 注意&#xff1a;相交不止是数值上的相同。 举例2&#xff1a;2为相交点 举例3&#xff1a;没有相交点 解题思路&#xff1a; 相交证明最后一…...

编程日记 2026/2/15 4:25:57

AI Agent中的MCP详解

一、协议定义与核心价值 MCP（Model Context Protocol，模型上下文协议）是由Anthropic公司于2024年11月推出的开放标准协议，其核心目标是通过建立统一接口规范，解决AI模型与外部系统集成效率低下的行业痛点。该协议通过标准化通信机制，使大型语言模型（LLM）能够无缝对接数…...

编程日记 2026/2/15 12:23:26

win系统上自动化安装配置WSL linux和各种生信工具教程

windows系统上自动化安装配置WSL linux系统和各种生信工具教程 高通量测序原始数据的上游分析模块介绍 我开发的OmicsTools软件的这些分析测序原始数据的上游处理分析模块需要使用到linux和linux系统中的一些生信工具&#xff0c;在这里我开发了在windows系统中自动化安装WSL …...

编程日记 2026/2/20 16:19:06

统计可重复列表中的TOP N

文章目录 方案1&#xff1a;HashMap统计 全排序实现步骤&#xff1a;代码实现&#xff1a;优缺点&#xff1a; 方案2&#xff1a;HashMap统计 最小堆&#xff08;优先队列&#xff09;实现步骤&#xff1a;代码实现&#xff1a;优缺点&#xff1a; 方案3&#xff1a;Java Str…...

编程日记 2026/2/24 19:00:31

PowerBI纯小白如何驾驭DAX公式一键生成：copilot for fabric

在2025年2月份更新中&#xff0c;powerbi desktop里的copilot功能还新增了一个非常强大的功能&#xff1a;一键生成多个度量值&#xff0c;并直接加载到模型。 直接上示例展示&#xff1a; 打开DAX查询视图&#xff0c;在copilot窗格中直接输入想要生成多个度量值&#xff0c…...

编程日记 2026/2/26 20:15:41

Pytest的夹具

1、pytest的前置后置夹具 fixture 有些内容是在每个用例执行之前都要运行操作：-- 用例前置 接口：购物车模块先登录 --登录结果 【token鉴权】 UI： 每次用例 打开浏览器 --driver 有些内容在每个用例之后都要运行操作：–用例后置 接口： 数据清除 UI：关闭浏览器 叫做用例的…...

编程日记 2026/2/25 20:02:49

两市总的净流出和净流入来分析情况

为了排查数据干扰&#xff0c;只从两市总的净流出和净流入来分析情况。 净流出才对应资金抽离&#xff1a;若净流入为负&#xff08;即净流出&#xff09;&#xff0c;则意味着资金从股市中撤出&#xff0c;例如主动卖出的金额超过主动买入金额。净流入反映市场信心&#xff1…...

编程日记 2026/2/13 19:59:47

GitHub在push推送到远程仓库的时候显示Logon failed登录失败

具体问题描述 git.exe push --progress "origin" master:master Logon failed, use ctrlc to cancel basic credential prompt. remote: Support for password authentication was removed on August 13, 2021. 这是因为Git 推送失败的原因是 GitHub 已经不支持密码认…...

编程日记 2025/7/17 19:51:01

如何在SQL中高效使用聚合函数、日期函数和字符串函数：实用技巧与案例解析

文章目录 聚合函数group by子句的使用实战OJ日期函数字符串函数数学函数其它函数 聚合函数 函数说明COUNT([DISTINCT] expr)返回查询到的数据的 数量SUM([DISTINCT] expr)返回查询到的数据的 总和&#xff0c;不是数字没有意义AVG([DISTINCT] expr)返回查询到的数据的 平均值&…...

编程日记 2026/2/27 3:29:50

AutoGen ：使用 Swarm 构建自治型多智能体团队

👉👉👉本人承接各类AI相关应用开发项目(包括但不限于大模型微调、RAG、AI智能体、NLP、机器学习算法、运筹优化算法、数据分析EDA等) !!!👉👉👉 有意愿请私信!!!AutoGen 的 AgentChat 模块提供了一种强大的方法来构建多智能体协作系统。 在之前的文章中，我们探讨了…...

编程日记 2025/12/20 20:27:30

RK3568平台设备树文件功能解析(鸿蒙系统篇)

鸿蒙设备树驱动修改时候发现目录下有很多的rk3568 的设备树，由于对这些设备树功能不太熟悉，所以索性就整理一下不同设备树的功能 rk3568-evb1-ddr4-v10.dts rk3568-evb4-lp3-v10.dts rk3568-evb6-ddr3-v10-rk628-rgb2hdmi.dts …...

编程日记 2026/2/23 20:59:24

k8s-coredns-CrashLoopBackOff 工作不正常

本文作者&#xff1a; slience_me 问题描述 # 问题描述 # rootk8s-node1:/home/slienceme# kubectl get pods --all-namespaces # NAMESPACE NAME READY STATUS RESTARTS AGE # kube-flannel kube-flannel-ds-66bcs …...

编程日记 2026/2/15 9:21:07

【Android性能】Systrace分析

1&#xff0c;分析工具 1&#xff0c;Systrace新UI网站 Perfetto UI 2&#xff0c;Systrace抓取 可通过android sdk中自带的systrace抓取&#xff0c;路径一般如下&#xff0c;..\AppData\Local\Android\Sdk\platform-tools&#xff0c; 另外需要安装python2.7&#xff0c;…...

编程日记 2026/2/14 2:52:50

Unity导出WebGL，无法显示中文

问题&#xff1a;中文无法显示 默认字体无法显示中文 在编辑器中设置了中文和英文的按钮&#xff0c;中文按钮无法显示 导出后无法显示中文 解决办法&#xff1a; 自己添加字体&#xff0c;导入项目&#xff0c;并引用 示例 下载一个字体文件&#xff0c;这里使用的阿里…...

编程日记 2026/2/20 12:32:22

oracle事务的组成

1)数据库事务由以下的部分组成: 一个或多个DML 语句 ; 一个 DDL(Data Definition Language – 数据定义语言) 语句&#xff1b; 一个 DCL(Data Control Language – 数据控制语言)语句&#xff1b; 2)事务的执行开始&#xff1a; 以第一个 DML 语句的执行作为开始 &#xff0c;…...

编程日记 2026/2/15 21:23:21

【如何在OpenWebUI中使用FLUX绘画：基于硅基流动免费API的完整指南】

如何在OpenWebUI中使用FLUX绘画&#xff1a;基于硅基流动免费API的完整指南 注册并获取硅基流动秘钥OpenWebUI中使用函数配置自定义模型-提示词配置效果验证 ) FLUX绘画是一种强大的AI绘图工具&#xff0c;本文将详细介绍如何在OpenWebUI中集成并使用FLUX绘画功能&#xff0c;…...

编程日记 2026/2/21 18:51:33

QT 磁盘文件 教程04-创建目录、删除目录、遍历目录

【1】新建目录 bool CreateDir(QString name){QString fileName name ;QDir dir(fileName);if (dir.isEmpty()) {dir.mkdir(fileName);return true;}else{qDebug()<<"文件夹已存在";return false;} } 【2】删除目录 bool DeleteDir(QString fileName){if (…...

编程日记 2026/2/25 20:01:54

Event driven agentic document workflows 笔记 - 2

代理文档工作流&#xff08;ADW&#xff09;- 课程笔记 Agentic Document Workflows (ADW) 1. 课程目标 介绍 代理文档工作流&#xff08;ADW&#xff09; 背后的核心概念&#xff0c;包括&#xff1a; RAG&#xff08;检索增强生成&#xff09;代理工作流 探讨如何利用 事件…...

编程日记 2026/2/14 13:02:53