details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现。
注:目前仅Chrome支持此标签。

details有一个新增加的子标签——summary,当鼠标点击summary标签中的内容文字时,details标签中的其他所有元素将会展开或收缩。

detalis标签:

案例1:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>HTML5每日一练之details展开收缩标签的应用</title>
  6. </head>
  7. <body>
  8. <details>
  9. <summary>HTML5|CSS3|论坛 | 前端开发网(W3Cfuns.com)!</summary>
  10. <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛,打造最好的HTML5/CSS3论坛</p>
  11. </detalis>
  12. </body>
  13. </html>

复制代码

如果details中不存在summary标签会怎样呢,其实当details元素内没有summary标签的时候,浏览器在解析的时候会提供一个默认的文字,比如“查看详细”诸如此类的本地化文字,浏览器同样再会提供一个诸如上下箭头之类的图标。比如下面的案例2就是一个不存在summary子标签的例子。

案例2:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>HTML5每日一练之details展开收缩标签的应用</title>
  6. </head>
  7. <body>
  8. <details>
  9. <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛,打造最好的HTML5/CSS3论坛</p>
  10. </details>
  11. </body>
  12. </html>

复制代码

有的时候,我们需要detalis中的内容默认为展开状态怎么办?
其实HTML5也已经为我们想到了,如果有着方面的需求,我们只需要加入一个属性即可,如案例3。

Open属性:

将案例1的代码修改后如下:

案例3:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>HTML5每日一练之details展开收缩标签的应用</title>
  6. </head>
  7. <body>
  8. <details open>
  9. <summary>HTML5|CSS3|论坛 | 前端开发网(W3Cfuns.com)!</summary>
  10. <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛,打造最好的HTML5/CSS3论坛</p>
  11. </details>
  12. </body>
  13. </html>

复制代码

由此可见,HTML5为我们的确带来了很大方便。

HTML5每日一练之details展开收缩标签的应用的更多相关文章

  1. HTML5每日一练之progress标签的应用

    progress标签:从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条.在HTML5中我们终于可以不用模拟了. <progress id="W3Cfuns_pr ...

  2. HTML5每日一练之figure新标签的应用

    igure元素是一种元素的组合,可带有标题(可选).figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响.figure所表示的内容可以是图片.统计图或代码示例 ...

  3. HTML5每日一练之视频标签的应用

    与音频一样,在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视 ...

  4. HTML5每日一练之OL列表的改良

    在HTML5中的OL被改良了,为它增加了两个新属性. start属性:start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&qu ...

  5. HTML5每日一练之input新增加的六种时间类型应用

    今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chr ...

  6. HTML5每日一练之input新增加的5种其他类型1种标签应用

    今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color 注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好 ...

  7. HTML5每日一练之input新增加的URL类型与email类型应用

    1.URL类型: <form> <input name="urls" type="url" value="http://www.w3 ...

  8. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  9. SlickGrid example 5:带子项的展开收缩

    带子项的展开收缩.   代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...

随机推荐

  1. Android真机调试的时候logcat中无法输出调试信息的解决办法

    真机调试不输出日志到logcat的原因是手机厂商默认关闭了调试打印的功能,通过以下方法开启此方法. 下面以华为P6手机为例进行操作: 1.在拨号界面输入:*#*#2846579#*#* 进入测试菜单界 ...

  2. hdu 4911 Inversion (分治 归并排序 求逆序数)

    题目链接 题意:给n个数,求交换k次相邻的数之后的最小的逆序数对. 用分治的方法,以前在poj上做过这种题,昨天比赛的时候忘了.... 下面的归并排序还是以前的模板. #include <ios ...

  3. 命名空间“System.Web”中不存在类型或命名空间名称“Script”(是缺少程序集引用吗?)

    网上有些资料说,在项目上鼠标右键,添加引用→.Net→System.Web.Entensions就可以了. 实际上很多时候在项目中的添加引用窗口上,根本找不到System.Web.Entensions ...

  4. SharePoint CMAL方式处理的 增,删,查,改

    SPContext.Current.Web.Lists["UserInfo"]:获取网站的List,名称是:UserInfo userlist.AddItem():添加数据到Lis ...

  5. UVa 11168 (凸包+点到直线距离) Airport

    题意: 平面上有n个点,求一条直线使得所有点都在直线的同一侧.并求这些点到直线的距离之和的最小值. 分析: 只要直线不穿过凸包,就满足第一个条件.要使距离和最小,那直线一定在凸包的边上.所以求出凸包以 ...

  6. (转)在mac上配置cocos2d-x开发环境

    转自:http://www.cnblogs.com/xiaodao/archive/2013/01/08/2850751.html 一.下载cocos2d-x最新安装包 在终端中cd到本地将要存放目录 ...

  7. mk文件剖析

    一个Android.mk file用来向编译系统描述你的源代码.具体来说:该文件是GNU Makefile的一小部分,会被编译系统解析一次或多次.你可以在每一个Android.mk file中定义一个 ...

  8. linux shell ls -1 列显示文件

    /******************************************************************************* * linux shell ls -1 ...

  9. 学习:java设计模式—工厂模式

    一.工厂模式主要是为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的. 工厂模式在<Java与模式>中分为三类: 1)简单工厂模式(Simple Facto ...

  10. 【 D3.js 高级系列 — 9.0 】 交互式提示框

    一般来说,图表中不宜存在过多文字.但是,有时需要一些文字来描述某些图形元素.那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字.这是一种简单.普遍的交互式,几乎适用于 ...