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>