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

details 标签提供了一种替代 JavaScript 的方法，它主要是提供了一个展开/收缩区域。details 标签中可以使用 summary 标签从属于 details 标签，单击 summary 标签中的内容文字时，details 标签中的其他所有从属元素将会展开或收缩。语法如下：

<details><summary>标题</summary><p>文本内容</p>
</details>

details 标签可以可选地接受 open 属性，以确保在页面载入时该元素是展开的。

<details open>
</details>

【实例】使用<details>标签实现展开/收缩信息。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="author" content="pan_junbiao的博客"><title>HTML5使用<details>标签：展开/收缩信息</title><style type="text/css">details {overflow: hidden;background: #e3e3e3;margin-bottom: 10px;display: block;}details summary {cursor: pointer;padding: 10px;}</style>
</head><body><details open><summary>博客信息</summary><p>您好，欢迎访问 pan_junbiao的博客 </p><p>https://blog.csdn.net/pan_junbiao</p></details>
</body></html>

执行结果：