HTML details标签

本文概述

HTML <details>标签用于指定网页上用户可以按需查看或隐藏的其他详细信息。

根据W3C HTML规范, 它用作公开窗口小部件, 用户可以从中检索其他信息或控件。

它与称为<summary>的相关标记一起使用。从技术上讲, 不需要摘要标记, 但是如果你忽略此标记, 则浏览器将使用一些默认文本。

<details>标记将包裹你要显示或隐藏的所有内容, 而<summary>标记则包含该部分的摘要和标题。

HTML details是HTML5中引入的新标签。

让我们举个例子来清楚地了解这一点。


HTML details标签属性

HTML details标记还支持HTML中的全局和事件属性。

details标签提供了一个打开的特定属性。

属性 描述
open 它指定将向用户显示(打开)详细信息。

HTML details标签示例

<details>
<summary>Copyright 2011-2014.</summary>
<p> - by srcmini. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the srcmini02.com</p>
</details>
<p><b>Note:</b> The details tag is currently only supported in Opera, Chrome, and in Safari 6.</p>

立即测试

输出:

版权所有2011-2014。

-通过srcmini。版权所有。

该网站上的所有内容和图形都是srcmini02.com的财产。

注意:details标签目前仅在Opera, Chrome和Safari 6中受支持。


支持的浏览器

Element Chrome IE Firefox Opera Safari
<details> Yes No No Yes Yes
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?