HTML5教程：detalis标签运用详细说明-HTML教程-爱易网页

HTML5教程：detalis标签运用详细说明

日期：2013-12-22　浏览次数：20780 次

网页制造aiyiweb文章简介：details标签的出现，为我们带来了更好的用户体验，不必为这种收缩展开的效果再编写JS来实现。

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>爱易网任务室提供最新的网页制造、网页设计、网页特效，为团体网站提供网页素材模板和网页视频学习</title>
</head>
<body>
<details>
<summary>爱易网任务室提供最新的网页制造、网页设计、网页特效，为团体网站提供网页素材模板和网页视频学习</summary>
爱易网任务室提供最新的网页制造、网页设计、网页特效，为团体网站提供网页素材模板和网页视频学习
</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>爱易网任务室提供最新的网页制造、网页设计、网页特效，为团体网站提供网页素材模板和网页视频学习</title>
</head>
<body>
<details>
爱易网任务室提供最新的网页制造、网页设计、网页特效，为团体网站提供网页素材模板和网页视频学习
</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>爱易网任务室提供最新的网页制造、网页设计、网页特效，为团体网站提供网页素材模板和网页视频学习</summary>
爱易网任务室提供最新的网页制造、网页设计、网页特效，为团体网站提供网页素材模板和网页视频学习
</details>
</body>
</html>

由此可见，HTML5为我们的确带来了很大方便。

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

HTML5教程：detalis标签运用详细说明

相关资料更多>

推荐阅读更多>