3.2 页面交互元素

对于网站应用来说，表现最为突出的就是客户端与服务器端的交互。HTML5增加了交互体验元素，本节将详细讲解这些元素。

3.2.1 <details>标签和<summary>标签

<details>标签用于描述文档或文档某个部分的细节。<summary>标签经常与<details>标签配合使用，作为<details>标签的第一个子标签，<summary>标签用于为<details>标签定义标题。标题是可见的，当用户单击标题时，会显示或隐藏<details>标签中的其他内容。

【例3-7】 使用<details>标签和<summary>标签描述文档。本例在浏览器中的显示效果如图3-8所示。

【说明】目前只有Chrome和Safari浏览器支持<details>标签的折叠效果。本例若要实现标题的折叠效果，需要在Chrome浏览器中浏览验证，单击标题的展开效果图3-9所示。

图3-8 <details>标签和<summary>标签的页面显示效果

图3-9 标题的展开效果

3.2.2 <progress>标签

<progress>标签用于表示一个任务的完成进度。这个进度可以是不确定的，只表示进度正在进行，但是不清楚还有多少工作量没有完成。<progress>标签的常用属性值有两个，具体如下。

1）value：已经完成的工作量。

2）max：总共有多少工作量。

其中，value和max的属性值必须大于0，且value的属性值要小于或等于max的属性值。

【例3-8】使用<progress>标签显示项目开发进度。本例在浏览器中的显示效果如图3-10所示。

图3-10 <progress>标签的页面显示效果

【说明】IE 9浏览器并不支持<progress>标签，本例的显示效果是在Chrome浏览器中实现的。