【HTML】details标签

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>

<body>

    <!-- details 表示一个可点击展开或折叠的元件,展示详细信息 -->

    <details>
        <p>你展开了详细信息</p>
    </details>

    <!-- summary 标签可用来定义details的标题,会在页面上直接显示summary的内容 -->
    <details>
        <summary>这是一段summary总结</summary>
        <p>你展开了详细信息</p>
    </details>

    <!-- open 属性表示默认展开details -->
    <details open>
        <p>你展开了详细信息</p>
    </details>

</body>

</html>

默认效果:
效果

猜你喜欢

转载自blog.csdn.net/Tiezhu_Wang/article/details/114950551