HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。
用法
一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jQuery手风琴插件差不多。
其大致写法如下：
<details>
<summary>Google Nexus 6</summary
<p>商品详情：</p>
<dl>
<dt>屏幕</dt>
<dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd>
<dt>电池</dt>
<dd>3220 mAh</dd>
<dt>相机</dt>
<dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
<dt>处理器</dt>
<dd>Qualcomm® Snapdragon™ 805 processor</dd>
</dl>
</details>
首先是<details>标签，里面接着是标题<summary>，这里面的内容一般简短，具有总结性，会展示在页面。接着可以跟任意类型的HTML元素作为详情内容，这些内容需要在点击<summary>才会呈现。
上面代码呈现出来的效果会是下面这样的：
HTML5 <details> 标签 三联
最开始详情是隐藏的，当点击时都会展现。
open 属性
当然，你也可以通过给<details>标签设置open属性让它默认为展开状态。
<details open>
<summary>Google Nexus 6</summary>
<p>商品详情：</p>
<dl>
<dt>屏幕</dt>
<dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd>
<dt>电池</dt>
<dd>3220 mAh</dd>
<dt>相机</dt>
<dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
<dt>处理器</dt>
<dd>Qualcomm® Snapdragon™ 805 processor</dd>
</dl>
</details>
此时默认会把详情展开，而点击标题后会折叠起来。
示例
示例如上面那样，预览在线版本可点击此处。
浏览器兼容性
由于是HTML5新标签，浏览器支持情况不是很理想。从来自caniuse的数据来看，目前仅Chrome, Safari 8+ 和Opera 26+支持此标签。
可喜的是，如果你在caniuse开启了「显示来自UC浏览器的结果」 选项的话，会发现，国产的UC浏览器也支持了此标签。
- 2017年临沧市双江县教育系统县城区学校选调公告
- 2017年德州市陵城区事业单位招聘工作人员(教育类)进行体检通知
- 2017年汕尾市陆河县招聘镇级残疾人专职委员拟聘用名单公示
- 临沧市耿马县2017年县级直属学校教师选聘拟聘公示
- 2017年香港大学深圳医院招聘行政及保障事务部岗位公告
- 2017年临沧市沧源县勐省镇人民政府购买服务性岗位招聘公告
- 保山市施甸县2017年县直校遴选教师面试成绩及总成绩公示
- 2017年香港大学深圳医院现场招聘注册护士(N3)walk-in招聘公告
- 2017年香港大学深圳医院现场招聘注册护士兼职walk-in招聘公告
- 2017年香港大学深圳医院现场招聘助理护士(抽血员)walk-in招聘公告
- 2017年佛山市南海区大沥镇流管专管员招聘公告
- 2017年昭通市盐津县人民法院招聘合同制书记员拟录用书记员公示
- 2017年江门台山市机关事务管理局招聘工作人员公告
- 2017年宁波慈溪市白沙路街道招聘社区专职工作者笔试成绩及面试事项公告
- 2017年宁波慈溪市桥头镇人民政府所属事业单位选调工作人员拟聘用公示
- 曲靖市麒麟区教育系统2017招聘（合同制）教师资格复审名单
- 2017年盐城市产品质量监督检验所招聘启事
- 连云港市连云区事业单位2017年招聘拟聘用人员公示
- 2017年宁波慈溪市人力社保局所属事业单位选调工作人员拟选调对象公示
- 2017年茂名市招聘急需紧缺专业人才公示
- 2017年宁波慈溪市坎墩街道“两公开”选拔村后备干部工作公告第二号
- 曲靖市麒麟区教育系统2017招聘（合同制）教师资格复审名单公告
- 2017年梅州市大埔县第二批事业单位招聘人员公告
- 2017年宁波慈溪市浒山街道办事处招聘编外人员笔试成绩及进入面试人员公告
- 连云港市体育运动学校2017年招聘教练员报名考试方式
- set-put-mind-to
- set/put sb's mind at rest/ease
- set-put-sb-s-mind-at-rest-ease
- set/put someone's mind at rest/ease
- set/put the record straight
- set-put-the-record-straight
- set-put-the-seal-on
- set/put the seal on something
- set/put the seal on sth
- set-put-the-seal-on-sth
- 号褂
- 号角
- 司
- 司书
- 司事
- 司令
- 司令员
- 司令塔
- 司令部
- 司仪
- 小学生与梦想同行演讲稿
- 大学生青春中国梦演讲稿范文五篇
- 助人为乐中学生演讲稿范文
- 大学系学生会主席竞选演讲稿
- 简单的小学生竞选班长演讲稿
- 理解父母孝敬父母的演讲稿全新集锦
- 有关平凡的即兴演讲稿5分钟
- 初中生国庆节演讲稿学生优秀范文
- 初三中考演讲稿最新5篇集合
- 大学生励志演讲稿大全集锦