以下是<details>和<summary>标签的基本用法:
<details>
<summary>详细信息</summary>
<p>这是详细信息的内容。</p>
</details>
在这个例子中,<details>标签包含一个<summary>标签和详细内容的段落(<p>)。用户可以点击"详细信息"来展开或收起段落。
你也可以在<details>内放置其他HTML元素、文本、图像等,以展示更复杂的内容。
<details>
<summary>更多信息</summary>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</details>
在这个例子中,详细内容包含一个无序列表。用户点击"更多信息"标题将显示或隐藏列表。
这个标签使得可以更优雅地处理需要隐藏或展示额外信息的场景,而不需要使用JavaScript或CSS来实现。
转载请注明出处:http://www.zyzy.cn/article/detail/3719/HTML5