更新时间:2014年6月20日

details(以点播的形式表示详细信息)新元素

<details>~</details>

details元素用于追加能够提供给用户的可显示或隐藏详细信息的小工具,担任界面的角色,通常称之为扩展器。该元素是HTML5新增加元素。

details元素中的起始位置添加担当概括、说明的summary元素,接下来是详细信息。该顺序不能颠倒。

属性

1、open内容属性
控制该当元素的内容是否显示,如果指定该属性,内容将处于显示状态。

使用例

<details open="open">

<summary>处理中…<progress max="100" value="24"></progress>24%</summary>

<p>共100页,已经处理了25页</p>

<p>http://example.jp</p>

</details>

<details>

<summary>处理中…<progress max="100" value="24"></progress>24%</summary>

<p>共100页,已经处理了25页</p>

<p>http://example.jp</p>

</details>

浏览器上的显示结果↓


处理中…24%

共100页,已经处理了25页

http://example.jp

处理中…24%

共100页,已经处理了25页

http://example.jp

浏览器支持情况

元素
details no 12.0 no 6.0 15.0