html5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。

标签定义及使用说明

<details> 标签规定了用户可见的或者隐藏的需求的补充细节。
<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
<details> 元素的内容对用户是不可见的，除非设置了 open 属性。

用法

一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jquery手风琴插件差不多。在markdown里也经常用，用该标签包裹了的内容默认会被隐藏，只留下一个简述的文字，我们点击以后才会展示详细的内容，其大致写法如下：

<details>
  <p>我是一段被隐藏的内容</p>
</details>

这还没有加任何一行的 js 代码，我们点击后， details 标签上会多一个 open 的属性，被隐藏的内容就展示出来了默认情况下，简要文字为 "详情" ，想要修改这个文字，要搭配 summary 标签来使用，比如：

<details>
  <summary>点击查看更多</summary>
  <p>我是一段被隐藏的内容</p>
</details>

我在使用这个标签的时候，会出现一个棕色的边框（我网页背景是黑色，字体是白色），请问怎么能不显示这个边框？

可以在css中添加属性border:none; 设置这个就不会出现边框了；

open 属性

最开始详情默认是隐藏的，当点击时都会展现。你也可以通过给<details>标签设置open属性让它默认为展开状态。

浏览器兼容性

由于是HTML5新标签，浏览器支持情况不是很理想。从来自caniuse的数据来看，目前仅Chrome, Safari 8+ 和Opera 26+支持此标签。

可喜的是，如果你在caniuse开启了「显示来自UC浏览器的结果」 选项的话，会发现，国产的UC浏览器也支持了此标签。

链接: https://fly63.com/article/detial/11377