HTML5使用details标签：展开/收缩信息

html5 的 details 标签用于展示可折叠信息，让用户按需查看详情。语法为：，包含 （可点击标题）和要显示/隐藏的内容。可以通过 open 属性在页面加载时控制内容的初始显示状态。details 标签可使用 css 进行样式化。

html5 中的 details 标签：显示和隐藏信息

HTML5 中的 details 标签提供了一种简单的方法来显示或隐藏特定信息。它非常适合用于在页面上创建可折叠的部分，以便用户可以按需查看详细信息。

语法

<details>   <summary>可点击的标题</summary>   隐藏的内容 </details>

属性

立即学习“前端免费学习笔记（深入）”；

• open：指定内容是否在初始加载时显示。如果值为 “open”，则内容默认显示；否则，则隐藏。

如何使用

1. 创建一个 summary：summary 元素包含一个可点击的标题，用于展开或折叠内容。
2. 添加要显示/隐藏的内容：将要显示或隐藏的内容放在 details 标签内，在 summary 元素之后。

示例

<details open>   <summary>关于我</summary>   我是约翰·史密斯，是一名网页开发者。 </details>

样式化

details 标签可以使用 css 进行样式化，以定制其外观和行为。例如：

details {   border: 1px solid #ccc;   padding: 10px;   margin: 10px; }  details summary {   cursor: pointer;   font-weight: bold; }

浏览器支持

details 标签得到所有现代浏览器的支持。