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 ...
随机推荐
- Java内部类总结 分类： 原理 2015-06-28 09:51 9人阅读 评论(0) 收藏
内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的. 内部类可为静态,可用protected和private修饰(而外部类只能使用public和缺省的包访问 ...
- 【C#设计模式——创建型模式】抽象工厂模式
抽象工厂模式比工厂模式具有更高层次的抽象性.当要返回一系列相关类中的某一个,而每个类都能根据需要返回不同的对象时,可以选择这种模式.直接进入示例. 示例描述:完成花园的规划,多种花园种类,每个里面多种 ...
- 查看mssql死锁的详细信息（存储过程）
CREATE procedure [dbo].[sp_who_lock]asbegindeclare @spid int,@bl int, @intTransactionCountOn ...
- sublime-text3插件安装
sublime-text3和sublime-text2一样安装插件前都需要先安装,Package control ,然而安装Package control的代码和sublime-text2又不相同.如 ...
- nodejs抓网易NBA数据
var http = require("http");var cheerio = require("cheerio"); var url = "htt ...
- POJ 2516 最小费用流
依然最小费用最大流模板题 建边麻烦了些 #include <cstdio> #include <cstring> #include <iostream> #incl ...
- poj3468,poj2528
其实这两题都是基础的线段树,但对于我这个线段树的初学者来说,总结一下还是很有用的: poj3468显然是线段树区间求和,区间更改的问题,而poj2528是对区间染色,问有多少种颜色的问题: 线段树的建 ...
- Linux LiveCD 的制作
Knoppix,只需一张光盘, 就能够让我们在任何场所,随心所欲地使用 Linux1, 打破了操作系统只能先安装再使用的传统概念. Knoppix 最初的设计用途是教学,但由于这项技术很受欢迎,使得 ...
- 图形数据库、NOSQL和Neo4j
简介 在众多不同的数据模型里,关系数据模型自80年代就处于统治地位,而且有不少实现,如Oracle.MySQL和MSSQL,它们也被称为关系数据库管理系统(RDBMS).然而,最近随着关系数据库使用案 ...
- RESTful API 设计最佳实践(转)
背景 目前互联网上充斥着大量的关于RESTful API(为方便,下文中“RESTful API ”简写为“API”)如何设计的文章,然而却没有一个”万能“的设计标准:如何鉴权?API 格式如何?你的 ...