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 ...
随机推荐
- BZOJ 2323 细胞（矩阵）
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2323 题意: 题意过于复杂,我直接简化下.给出一个长度为n的数字串,只包含1到9,将数字 ...
- Android开发之火星坐标转换工具
代码: import java.io.InputStream; import java.io.ObjectInputStream; /* * 把获取到的真实地址转换为火星坐标 */ public cl ...
- Android开发之SmsManager和SmsMessage
Android的手机功能(通话与短信)都放在android.telephony包中,到了4.4时(也就是API19)android.provider.Telephony及相关类横空出世辅助电话功能以及 ...
- Mybatis的if test字符串比较问题
1. Mybatis判断字符串是否为空的变态写法 <if test="bussSceneIsNull =='0'.toString() "> <![CDATA[ ...
- git设置对比工具
windows下设置 beyond compare 3 为 git 的对比工具. 首先需要先安装 beyond compare 3 工具,切记需要安装安装版的,不要搞绿色版的. mac下使用 Kal ...
- listview默认选择第一项，点击换子项背景图
(不是大神,没有几百子项目,去你丫的) private int last_item_position ; @Override public void onItemClick(AdapterView&l ...
- UVALive 4043 Ants(二分图完美匹配)
题意:每个蚁群有自己的食物源(苹果树),已知蚂蚁靠气味辨别行进方向,所以蚁群之间的行动轨迹不能重叠.现在给出坐标系中n个蚁群和n棵果树的坐标,两两配对,实现以上要求.输出的第 i 行表示第 i 个蚁群 ...
- POI读取Word与Excel
import java.io.BufferedWriter; import java.io.FileInputStream; import java.io.FileNotFoundException; ...
- 【转】那些不能错过的Xcode插件 -- 不错不错
原文网址:http://www.cocoachina.com/industry/20130918/7022.html 古人云“工欲善其事必先利其器”,打造一个强大的开发环境,是立即提升自身战斗力的绝佳 ...
- Android 开发框架介绍
一.概述 现android开发有很多开发框架使用,做App不一定用到框架,但好框架的思想也是值得学习.选择合适的开发框架可提供实用功能,简化项目开发提升效率. 二.Afinal框架 简介 Afinal ...