HTML5每日一练之details展开收缩标签的应用

zoukankan html css js c++ java

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>

 HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛

 </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>

 HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛

 </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>

 HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛

 </details>

</body>

</html>

复制代码
由此可见，HTML5为我们的确带来了很大方便。
查看全文

相关阅读:
hibernate4.3.5，Final hibernate.cfg.xml的配置
 mysql 入门 jdbc
设计模式之责任链
 淘宝技术这十年
 java代码---------计算器实现
 java代码---------打印正三角形
 java代码=====实现修改while()
java------------break；
java代码-----循环变量的
 java代码----------实现写出循环

原文地址：https://www.cnblogs.com/liweitao/p/3852699.html