使用<details>和<summary>元素

它可以在body的任意地方使用下面有一个小例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>summary</title>

</head>

<body>

    <details>

        <summary>第一部分</summary>

        <p>第一部分内容</p>

        <details>

            <summary>第二部分</summary>

        <p>第二部分内容</p>

        </details>

    </details>

</body>

</html>

效果如下

折叠：

打开

details和summary可以对内容进行折叠的更多相关文章

  1. 三个不常用的HTML元素：<details>、<summary>、<dialog>

    前面的话 HTML5不仅新增了语义型区块级元素及表单类元素,也新增了一些其他的功能性元素,这些元素由于浏览器支持等各种原因,并没有被广泛使用 文档描述 <details>主要用于描述文档或 ...

  2. details和summary

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. details和summary标签

    用于文档说明,有自带收缩.展开功能 <!DOCTYPE HTML> <html> <body> <details> <summary>HTM ...

  4. 小程序开发中，纯css实现内容收起折叠功能

    不多说,直接上代码: wxml页面: <!--收起折叠 begin--> <view style='width:100%;background:#fff;border-top:1px ...

  5. html5中 input的pattern属性 和 details/summary元素

    html5--3.21 课程小结与其他新增元素 一.总结 一句话总结: input的pattern属性可以设置正则验证,比如检测学号的位数和数字区间 details/summary元素配合起来可以做元 ...

  6. HTML5 <details> 标签

    HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 用法 一般情况下,details用来对显示在页面的内容做进一步骤解释.其展 ...

  7. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  8. Box Model,边距折叠，内联和块标签，CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  9. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

随机推荐

  1. 张高兴的 Windows 10 IoT 开发笔记：使用 Lightning 中的软件 PWM 驱动 RGB LED

    感觉又帮 Windows 10 IoT 开荒了,所以呢,正儿八经的写篇博客吧.其实大概半年前就想写的,那时候想做个基于 Windows 10 IoT 的小车,但树莓派原生不支持 PWM 啊.百度也搜不 ...

  2. eclipse安装lombok插件问题解决

    在 java平台上,lombok 提供了简单的注解的形式来帮助我们消除一些必须有但看起来很臃肿的代码, 比如属性的get/set,及对象的toString等方法,特别是相对于 POJO.简单的说,就是 ...

  3. 定制Three.js中Material属性

    1.找到想要更改的着色器代码

  4. ch6-条件渲染（v-if v-else v-else-if key管理可复用元素 v-show ）

    1 v-if 1.1 简单使用 <h1 class="h1" v-if="ok">yes</h1> <script> var ...

  5. RN 常见问题

    React/RCTBridgeModule.h not found #import <React/RCTBridgeModule.h> 全部替换为 #import "RCTBri ...

  6. linux上redis安装配置及其防漏洞配置及其攻击方法

    Linux上redis安装: 需先在服务器上安装yum(虚拟机可使用挂载的方式安装) 安装配置所需要的环境运行指令:  yum -y install gcc 进入解压文件执行make 指令进行编译 执 ...

  7. swift实现与OC的混编

    swift与OC的混编 现在写swift,很多的类库还不是很全,很多的第三方还是只有OC版的,这个时候swift想用,通常都是采用的swift和OC混编的方式.这里给大家演示一下混编是如何做的. sw ...

  8. Hibernate 学习笔记 - 2

    五.映射一对多关联关系 1. 单向多对一 即 单向 n-1 1)单向 n-1 关联只需从 n 的一端可以访问 1 的一端 ① 域模型: 从 Order 到 Customer 的多对一单向关联需要在Or ...

  9. WDA的配置

    WDA的配置 SAP的技术总是搞得很复杂,WDA的涉及到配置如下: 1. Internet Communication Manager 确认ICM中提供的HTTP/HTTPS运行正常. Tcode: ...

  10. 搭建Hadoop平台(新手入门)

    刚刚大学毕业,接触大数据有一年的时间了,把自己的一些学习笔记分享给大家,希望同热爱大数据的伙伴们一起学习,成长! 资料准备: Hadoop-2.7.1下载:http://pan.baidu.com/s ...