HTML details,summary基本效果实例页面

回到相关文章 »

效果：

这是摘要1

这里具体描述，标签相对随意，例如这里使用的<p>标签。

这是摘要2

这里<details>标签设置了HTML布尔属性open，因此，默认是展开状态。

如果<summary>缺省，则会自动补上，文案是“详细信息”。

代码：

HTML代码：

<details>
    <summary>这是摘要1</summary>
    <p>这里具体描述，标签相对随意，例如这里使用的&lt;p&gt;标签。</p>
</details>

<details open>
    <summary>这是摘要2</summary>
    <content>这里&lt;details&gt;标签设置了HTML布尔属性open，因此，默认是展开状态。</content>
</details>

<details open>
    <p>如果&lt;summary&gt;缺省，则会自动补上，文案是“详细信息”。</p>
</details>