3.4  使用<summary>标记元素实现交互

3.4 使用<summary>标记元素实现交互

在HTML 5中，标记<summary>包含了<details>元素的标题，元素<details>能够描述有关文档或文档片段的详细信息。在HTML 5中，<summary>通常配合<details>元素一起使用，通过<summary>元素说明文档的标题，通过<details>元素说明文档的详细信息。

下面通过一个具体实例讲解使用<summary>标记实现交互效果的方法。

在本实例中，在页面中分别加入一个<details>元素和一个<summary>元素，当显示<details>元素内容时，其子元素<summary>以字体加粗的形式展示在页面中。实例文件5.html的代码如下。

在上述实例代码中，为了突出显示<summary>元素，增加了一个加粗的字体效果。从代码的结构中可以看出，<summary>元素包含在<details>元素中，是<details>元素的子元素，应该在摆放位置时尽量放在第一个。执行后的效果如图3-7所示，单击文字左侧的小三角形符号后，所有文字将隐藏消失，如图3-8所示。

图3-7 初始效果

图3-8 所有文字将隐藏消失