使用<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. 点聚合功能---基于ARCGIS RUNTIME SDK FOR ANDROID

    一直不更新博客的原因,如果一定要找一个,那就是忙,或者说懒癌犯了. 基于ArcGIS RunTime SDK for Android的点聚合功能,本来是我之前做过的一个系统里面的一个小部分,今天抽出一 ...

  2. FastDFS的安装步骤

    1.安装相关环境 yum install -y gcc-c++ yum -y install libevent yum install -y pcre pcre-devel yum install - ...

  3. jP61 2.15

    import java.util.Scanner; public class Distance { public static void main(String[] args) {    Scanne ...

  4. asp.net数据四舍五入

    #region 数据四舍五入 /// <summary> /// 四舍五入 /// </summary> /// <param name="dblnum&quo ...

  5. BAT级别分类

    阿里的级别:P为技术岗,M为管理岗.P7是技术专家级别. 阿里级别对应薪资:  百度使用的T系列及对应薪资: 腾讯的T系列及对应薪资:

  6. CSS之 absoulte 属性

    特性: absoulte 与 float 具有相同的特性:包裹性,与破坏性  absoulte 与 float 可以交替使用  不受 relative 限制的 absoulte 定位,行为表现上可以不 ...

  7. python抓取zabbix图形,并发送邮件

    最近十九大非常烦,作为政府网站维护人员,简直是夜不能寐.各种局子看着你,内保局,公安部,360,天融信,华胜天成,中央工委,政治委员会... 360人员很傻X,作为安全公司,竟然不能抓到XX网站流量, ...

  8. win10 UWP 剪贴板 Clipboard

    win10 UWP 剪贴板 Clipboard使用Windows.ApplicationModel.DataTransfer.Clipboard 设置文本 DataPackage dataPackag ...

  9. ps之雪碧图制作

    图片拖入后 一般取同行同列最高最宽 自动在所选目录生成 打开: 修改 四次请求有点多啊. 打开 css sprite 自动生成坐标地址. 不过我们要把它排远一点 OK了. 我们生成以后: 坐标地址就可 ...

  10. Java基础总结--常用类以及包的访问权限

    -----Object---所有类的根类1.怎么得到的:通过对所有对象不断的向上抽取共性,具备所有对象的共性的东西2.常用的方法* equals(Object obj):比较两个对象的引用是否指向同一 ...