HTML5每日一练之details展开收缩标签的应用
details标签的出现，为我们带来了更好的用户体验，不必为这种收缩展开的效果再编写JS来实现。
注：目前仅Chrome支持此标签。
details有一个新增加的子标签——summary，当鼠标点击summary标签中的内容文字时，details标签中的其他所有元素将会展开或收缩。
detalis标签：
案例1：
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>HTML5每日一练之details展开收缩标签的应用</title>
- </head>
- <body>
- <details>
- <summary>HTML5|CSS3|论坛 | 前端开发网(W3Cfuns.com)!</summary>
- <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛</p>
- </detalis>
- </body>
- </html>
复制代码
如果details中不存在summary标签会怎样呢，其实当details元素内没有summary标签的时候，浏览器在解析的时候会提供一个默认的文字，比如“查看详细”诸如此类的本地化文字，浏览器同样再会提供一个诸如上下箭头之类的图标。比如下面的案例2就是一个不存在summary子标签的例子。
案例2：
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>HTML5每日一练之details展开收缩标签的应用</title>
- </head>
- <body>
- <details>
- <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛</p>
- </details>
- </body>
- </html>
复制代码
有的时候，我们需要detalis中的内容默认为展开状态怎么办？
其实HTML5也已经为我们想到了，如果有着方面的需求，我们只需要加入一个属性即可，如案例3。
Open属性：
将案例1的代码修改后如下：
案例3：
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>HTML5每日一练之details展开收缩标签的应用</title>
- </head>
- <body>
- <details open>
- <summary>HTML5|CSS3|论坛 | 前端开发网(W3Cfuns.com)!</summary>
- <p>HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛</p>
- </details>
- </body>
- </html>
复制代码
由此可见，HTML5为我们的确带来了很大方便。
HTML5每日一练之details展开收缩标签的应用的更多相关文章
- HTML5每日一练之progress标签的应用
progress标签:从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条.在HTML5中我们终于可以不用模拟了. <progress id="W3Cfuns_pr ...
- HTML5每日一练之figure新标签的应用
igure元素是一种元素的组合,可带有标题(可选).figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响.figure所表示的内容可以是图片.统计图或代码示例 ...
- HTML5每日一练之视频标签的应用
与音频一样,在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视 ...
- HTML5每日一练之OL列表的改良
在HTML5中的OL被改良了,为它增加了两个新属性. start属性:start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&qu ...
- HTML5每日一练之input新增加的六种时间类型应用
今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chr ...
- HTML5每日一练之input新增加的5种其他类型1种标签应用
今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color 注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好 ...
- HTML5每日一练之input新增加的URL类型与email类型应用
1.URL类型: <form> <input name="urls" type="url" value="http://www.w3 ...
- jQuery弹性展开收缩菜单插件gooey.js
分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <hea ...
- SlickGrid example 5:带子项的展开收缩
带子项的展开收缩. 代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...
随机推荐
- 有关于kali linux安装eclipse出现的一系列问题
第一步下载jdk,以及eclipse我就不再细说/官网都有的下载.(记得下载自己对应的版本就好了) 对于kali linux有这么一个问题,也是一直惹大家烦恼的问题--kali linux自带了jav ...
- init_MUTEX
2.6.25及以后的linux内核版本废除了init_MUTEX函数 新版本使用sema_init函数 平台:X86 32位内核:2.6.24定义: 引用 static inline void ini ...
- [Lintcode 3sum]三数之和（python，二分）
题目链接:http://www.lintcode.com/zh-cn/problem/3sum/?rand=true# 用这个OJ练练python…这个题意和解法就不多说了,O(n^2lgn)就行了, ...
- 定制IE浏览器的尖兵利器 - BHO
IE浏览器是当前使用人数最广的浏览器, 本文主要来讲述如何来打造我们自己特色的浏览器, 自定义工具栏按钮, 自定义网页的右击菜单, BHO技术与IE浏览器. 本文写作过程中参考不少网络上的相关资料, ...
- Error Curves（2010成都现场赛题）
F - Error Curves Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Descript ...
- Codeforces 383A - Milking cows
原题地址:http://codeforces.com/problemset/problem/383/A 题目大意:有 n 头奶牛,全部看着左边或者右边,现在开始给奶牛挤奶,给一头奶牛挤奶时,所有能看到 ...
- Oracle 数据库整理表碎片
Oracle 数据库整理表碎片 转载:http://kyle.xlau.org/posts/table-fragmentation.html 表碎片的来源 当针对一个表的删除操作很多时,表会产生大量碎 ...
- 任E行M1端口比特率特征码
分辨率:800x480gps端口:com1比特率:4800设备特征码:01D1D008内存:128M
- I.MX6 Ubuntu core porting
/*********************************************************************** * I.MX6 Ubuntu core porting ...
- 求双连通分量的详解。（根据刘汝佳的训练指南p314）
无向图的双连通分量 点-双连通图:一个连通的无向图内部没有割点,那么该图是点-双连通图. 注意:孤立点,以及两点一边这两种图都是点-双连通的.因为它们都是内部无割点. 边-双连通图:一 ...