本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.5节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
实例说明
< details >标记是一个全新的HTML 5元素，功能是描述文档或文档某个部分的细节。< details >标记经常与< summary >元素配合使用。在默认情况下，不显示< details >标记中的内容。当与< summary >标记配合使用时，在单击< summary >标记后才会显示< details >元素中设置的内容。< details >元素的常用属性如下所示。
open：值为open，功能是定义details是否可见。subject：值为sub_id，功能是设置元素所对应项目的ID号。draggable：值为true或false，功能是设置是否可以拖动元素，默认值是false。< details >标记本质上允许我们在单击标签时显示和隐藏内容。但是直到现在，这种效果还一直是用JavaScript实现的。假如在某个头部元素后面有一个箭头，当单击箭头时，下面的附加信息将会呈现；再次单击箭头后内容消失。在FAQ（在线问答）页面中经常使用这个功能。
具体实现
使用Dreamweaver创建一个名为“005.html”的文件，具体代码如下所示：
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>交互元素<details>的使用</title> <style type="text/css"> body{ font-size:12px } span{ font-weight:bold } details { overflow: hidden; height: 0; padding-left:200px; position: relative; display: block; } details[open] { height:auto; } </style> </head> <body> <span>隐藏</span> <details> 生成于 2012-05-17 </details> <span>显示</span> <details open="open"> 生成于 2012-05-17 </details> </body> </html>在上述代码中，在页面中使用了一个< details >元素，通过不设置该元素的open属性值与设置该属性值为“open”进行比较，并将结果展示在页面中。在本实例中，为了能更好地验证< details >元素的“open”属性，在页面的样式中分别定义了该元素的默认样式和显示状态的样式。其中第一个< details >使用的默认样式，第二个使用“open”。
执行后的效果如图1-6所示。
如果单击图1-6中“ 详细信息 ”前面的小三角符号，则这部分内容将会消失，如图1-7所示。
本书在写作时，只有谷歌的Chrome浏览器支持上述< details >的功能。例如，在Fiefox中不会显示小三角符号，如图1-8所示。
相关资源：七夕情人节表白HTML源码(两款)