本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.9节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
在全新的HTML 5中，标记< summary >包含了< details >元素的标题，元素< details >能够描述有关文档或文档片段的详细信息。< summary >是HTML 5中新增的一个标记，常包含于< details >元素中，配合< details >元素使用。在两者结合起来使用的代码中，< summary >元素的功能是说明文档的标题；< details >元素的功能是说明文档的详细信息。< summary >元素是< details >元素中的第一个子元素，二者经常同时出现在页面中。
在本实例中，在页面中分别加入一个< details >元素和一个< summary >元素，当显示< details >元素内容时，其子元素< summary >以字体加粗的形式展示在页面中。
具体实现
使用Dreamweaver创建一个名为“009.html”的文件，具体代码如下所示：
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>交互元素<summary>的使用</title> <style type="text/css"> body{ padding:5px; font-size:12px } summary{ font-weight:bold; } details { overflow: hidden; height: 0; padding-left:200px; position: relative; display: block; } details[open] { height:auto; } </style> </head> <body> <details open="open"> <summary>页面说明</summary> 今天是2012年5月26日 </details> </body> </html>在上述代码中，为了突出显示< summary >元素，增加了一个加粗的字体效果。从代码的结构中可以看出，< summary >元素包含在< details >元素中，是< details >元素的子元素，应该在摆放位置时尽量放在第一个。执行后的效果如图1-17所示，单击文字左侧的小三角形符号后，所有文字将隐藏消失，如图1-18所示。
相关资源：七夕情人节表白HTML源码(两款)