HTML <details> 标签

  • <details>标签定义和用法

    <details>标签指定用户可以按需查看或隐藏的其他详细信息。
    <details>标记可用于创建用户可以打开和关闭的交互式窗口小部件。任何类型的内容都可以放在<details>标记内。
    除非设置了open属性,否则<details>元素的内容不应该是可见的。

  • <details>浏览器支持

    Internet Explorer/Edge Chrome FireFox Safari Opera
    不支持 12.0(含)以上 49.0(含)以上 6.0(含)以上 15.0(含)以上
  • <details>标签实例

    <!DOCTYPE html>
    <html>
    <body>
    
    <details>
      <summary>版权所有 1999-2018.</summary>
      <p> - 蝴蝶教程。保留版权信息。</p>
      <p>本网站上的所有内容和图形都属于蝴蝶教程的财产。</p>
    </details>
    
    <p><b>注意:</b> details标签在Internet Explorer中不受支持。</p>
    
    </body>
    </html>
    
    尝试一下
    提示:该<summary>标记用于指定细节的可见标题。可以单击标题以查看/隐藏详细信息。
  • HTML4.01和HTML5之间的差异

    <details>标签是HTML5中的新标签。

  • <details>属性

    属性名 属性值 描述
    open5 open 指定细节应该对用户可见(打开)
  • <details>全局属性

    <details>标签还支持全局属性。

    查看有关全局属性的更多知识。

  • <details>事件属性

    <details>标签还支持事件属性。

    查看有关事件属性的更多知识。

  • <details>默认CSS设置

    details { 
        display: block;
    }