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 ...
随机推荐
- (四)CSS选择器和派生选择器
CSS派生选择器允许你根据文档的上下文关系来确定某个标签的样式.在学习派生之前,先来了解基本的CSS选择器.前面的文章中提到过下图,选择器的位置如下所示: CSS选择器 分为几种基本选择器:元素选择器 ...
- [Codeforces673C]Bear and Colors（枚举，暴力）
题目链接:http://codeforces.com/contest/673/problem/C 题意:给一串数,不同大小的区间内出现次数最多的那个数在计数的时候会+1,问所有区间都这样计一次数,所有 ...
- [Android] ImageView.ScaleType设置图解
ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例的缩放,及显示图片的整体还是部分,等等. 设置的方式包括: 1. 在layout xml中定义android ...
- easyui-dialog中文件上传处理
function openDialog() { // $('#dlg').dialog('open'); //EasyUi的dialog中文件上传,后台获取不到文件,需要改写为下面这样 $(" ...
- UVa 10305 (拓扑排序) Ordering Tasks
题意: 经典的拓扑排序.有n个任务,然后某些任务必须安排在某些任务前面完成,输出一种满足要求的序列. 分析: 拓扑排序用离散里面的话来说就是将偏序关系拓展为全序关系.我们将“小于”这种关系看做一条有向 ...
- 【iOS-cocos2d-X 游戏开发之九】Cocos2dx利用CCSAXParser解析xml数据&CCMutableDictionary使用与注意！
本站文章均为李华明Himi原创,转载务必在明显处注明:转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2dx/694.html ☞ ...
- liunx环境下的mysql数据库配置文件my.conf内的参数含义
[client]port = 3306socket = /tmp/mysql.sock [mysqld]port = 3306socket = /tmp/mysql.sock basedir = /u ...
- 【编程基础】const与#define的区别
[前言] 相信大家看别人代码的时候都遇到过,有人用#define定义,也有人用const定义. 那么两者的区别到底是什么呢?哪个更好用呢? 网上查了又查,下面总结一下. [总结] 编译器处理方式不同 ...
- Log4NET简介
log4net库是Apache log4j框架在Microsoft .NET平台的实现,是一个帮助程序员将日志信息输出到各种目标(控制台.文件.数据库等)的工具. 前提 最近做项目需要记录系统日志和用 ...
- JMeter使用jar进行压力测试
最近需要对改造的redis缓存接口做压力测试,使用了开源压力测试工具JMeter,分享一下自己的使用经验,希望能对需要进行压力测试的开发同学有所帮助. JMeter介绍 JMeter是Apache软件 ...