HTML5教程之details展开收缩标签的应用
2017-10-03 16:14
483 查看
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为我们的确带来了很大方便。
本文由 JS代码站 收集改动或原创丨www.sitejs.cn | 转载 请标明出处
本文原地址:http://www.sitejs.cn/sitejs-12740-1.html
相关文章推荐
- HTML5教程之details展开收缩标签的应用
- HTML5教程之details展开收缩标签的应用
- HTML5每日一练之details展开收缩标签的应用
- HTML5教程之音频Audio标签应用
- HTML5教程-meter标签的应用
- HTML5教程之progress标签的应用
- HTML5教程之mark标签的应用
- HTML5教程之figure标签的应用
- HTML5标签应用
- HTML5表单教程之Form新属性的应用
- HTML5教程之FileList文件列表对象的应用
- 讲给Android程序员看的前端教程(06)——HTML5标签(5)
- HTML5之音频Audio标签的应用
- html5,output标签应用举例
- HTML5资源教程9款赏心悦目的HTML5/CSS3应用特效
- 帝国CMS:灵动标签应用大汇总 [教程+技巧]
- WEB标准教程:P标签的应用
- 微信中的html5视频标签应用常用写法
- 实例讲解HTML5的meta标签的一些应用
- HTML5教程之datalist标签自动补全