使用<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. P1045

    问题 A: P1045 时间限制: 1 Sec  内存限制: 128 MB提交: 145  解决: 127[提交][状态][讨论版] 题目描述 题目很简单,给出N个数字,不改变它们的相对位置,在中间加 ...

  2. FastDFS 分布式文件系统的安装与使用

    跟踪服务器:192.168.152.129 (centos1) 存储服务器:192.168.152.130 (centos2) 环境:CentOS 6.6 用户:root 数据目录:/fastdfs ...

  3. Ubuntu中MongoDB安装

    在Ubuntu中MongoDB有时候启动不起来,可以参考以下方法从新安装: 1.导入包管理系统使用的公钥 Ubuntu 的软件包管理工具(即dpkg和APT)要求软件包的发布者通过GPG密钥签名来确保 ...

  4. 醒醒吧！互联网的真正未来不是AI，更不是VR,AR，而是区块链

    这些力量并非命运,而是轨迹.他们提供的并不是我们将去向何方的预测,而是告诉我们,在不远的将来,我们会向那个方向前行,必然而然. ---凯文•凯利 文字与货币 人类在演化过程中,凭借智慧创造了无数事物, ...

  5. Python自学笔记-面向对象编程（Mr seven）

    类的成员可以分为三大类:字段.方法和属性. 一.字段 字段包括:普通字段和静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同, 普通字段属于对象 静态字段属于类 二.方法 方法 ...

  6. Windows 10 16251 添加的 api

    本文主要讲微软最新的sdk添加的功能,暂时还不能下载,到 7月29 ,现在可以下载是 16232 ,支持Neon效果 实际上设置软件最低版本为 16232 就自动支持 Neon 效果. 主要添加了 A ...

  7. win10 uwp clone

    clone 可以用MemberwiseClone来复制一个类 但这个复制是浅复制,创建一个新的object然后复制值字段,对于引用就直接复制引用,不复制引用的本身,指向同样引用 如果要复制引用,可以使 ...

  8. 从零开始教你封装自己的vue组件

    组件(component)是vue.js最强大的功能之一,它可以实现功能的复用,以及对其他逻辑的解耦.但经过一段时间的使用,我发现自己并没有在业务中发挥出组件的最大价值.相信很多刚开始使用vue的朋友 ...

  9. VIM格式化代码（How to format code with VIM）

    1) 按两下小写g,即gg,定位光标到第一行.(2) 按住Shift+v,即大写V,进入可视化编辑的列编辑模式.(3) Shift+g,即大写G,选中整个代码.(4) 按下等号=,格式化所有代码.

  10. servlet过滤器简化版

    什么是过滤器 在struts2 中集成了过滤器,并可以根据需要选择合适自己的过滤器进行配置 , 过滤器:是基于函数回调的,运用java中的反射机制工作在struts2只能对于action起作用,在se ...