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

HTML5教程手机阅读

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>
</details>
</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展开收缩标签的应用】相关文章

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

2. HTML5每日一练之meter标签的应用

3. HTML5每日一练之视频标签的应用

4. HTML5每日一练之figure新标签的应用

5. HTML5每日一练之mark标签的应用

6. HTML5每日一练之progress标签的应用

7. HTML5每日一练之Canvas标签的应用-绘制径向渐变图形

8. HTML5每日一练之Canvas标签的应用-绘制坐标变换图形

9. HTML5每日一练之Canvas标签的应用-在页面上放置Canvas

10. HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用

本文来源：https://www.51html5.com/a603.html

点击展开全部

上一篇：HTML5每日一练之figure新标签的应用下一篇：HTML5每日一练之FileList文件列表对象的应用

﹝HTML5每日一练之details展开收缩标签的应用﹞相关内容

「HTML5每日一练之details展开收缩标签的应用」相关专题

html5 html代码

复制网址收藏网址分享到微信分享到微博分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢

友情链接：「李若虚」的诗词「守着鼻子摸着腮」的解释「草字头加一个每」是什么字「郑江」的诗词「望洋兴叹」的解释「妭」字的拼音和解释奇瑞捷豹路虎临江小吃星追梦简谱