3.3 交互元素

HTML5是一些独立特性的集合，它不仅新增了许多Web页面特征，而且本身也是一个应用程序。对于应用程序而言，表现最为突出的就是交互操作。HTML5为操作新增了对应的交互体验元素，如progress、meter、details、summary、menu、command等，这些元素可以在不请求服务器任何资源的情况下，改变用户选择的内容与展现状态。通过这些交互元素，更好地改善了HTML5页面的用户体验和功能。

3.3.1 progress元素

progress元素属于状态交互元素。所谓状态交互元素，表示页面在与用户进行数据交互时，为了增强用户的UI体验，显示在页面中的各种进度状态。

progress元素用来表示页面中的某个事物完成的进度。如下载文件时，可以通过该元素动态展示下载的进度。显示的方式可以使用整数（如1到100），也可以使用百分比（如1%到100%）。其语法格式如下：

＜progress value="当前进度值"max="最大值"＞

＜/progress＞

progress元素的属性及描述，见表3-1。

表3-1 progress元素的属性及描述

progress元素中设置的“value”值必须小于或等于“max”属性值，且两者都必须大于0。

【例3-3】progress元素实例，代码如下：

在浏览器中预览，效果如图3-5所示。

图3-5 progress标签显示效果

3.3.2 meter元素

meter元素是HTML5中新增的标签，用于表示在一定数量范围中的值，也属于状态交互元素。可用于投票系统中候选人各占比例情况及考试分数统计等。meter元素仅是帮助浏览器识别HTML中的数量，而不对该数量做任何格式修饰。其语法格式如下：

＜meter value="当前度量值"min="最小值"max="最大值"＞…＜/meter＞

meter元素的属性及描述，见表3-2。

表3-2 meter元素的属性及描述

【例3-4】meter元素实例，代码如下：

在浏览器中预览，效果如图3-6所示。

图3-6 meter标签显示效果

3.3.3 details元素和summary元素

details元素是HTML5中新增的一个标签，用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与legend交互才显示出来。这个元素实现的功能在网页中经常会看到，就是达到一种收缩展开切换的效果，一般情况下都是通过JS来实现的，当然在jQuery中也有现成的函数可以调用。details通过标签就能实现类似的效果。details有一个open属性，单击展开时会自动设定该属性值为true，收缩时该属性又被移除，跟现在通过JavaScript隐藏一段内容，在单击后才显示出来的做法有些类似。其语法格式如下：

＜details＞

＜summary＞…＜/summary＞

…

＜/details＞

＜details＞元素的常用属性及描述，见表3-3。

表3-3 details元素的属性及描述

其中open属性是一个boolean（布尔）属性，规定在HTML页面上details是否可见，在默认情况下对用户是不可见的。

【例3-5】details标签实例，示例代码如下：

在浏览器中预览，当鼠标在文本框内单击时，会出现选项列表提示。如图3-7所示：

图3-7 ＜details＞显示效果

summary元素是HTML5中新增的一个标签，常包含于details元素中，配合details元素使用。在两者结合起来使用的代码中，summary元素说明文档的标题，details元素用于说明文档的详细信息。summary元素是details元素中的第一个子元素，二者经常同时出现在页面中。

3.3.4 menu元素

menu元素是HTML5中重新启用的一个旧标签。menu元素在HTML2时就已经存在，但是在HTML4时曾被废弃。该元素常与li列表元素结合使用，用来定义一个列表式的菜单。其语法格式如下：

其属性及描述见表3-4。

表3-4 menu元素的属性及描述

【例3-6】menu标签实例，示例代码如下：

3.3.5 command元素

command元素是HTML5新增的标签，用于定义各种类型的命令按钮。利用该标签的“url”属性可以添加图片，并且实现图片按钮效果；另外，改变标签中的“type”属性值，还可以定义复选框或单选框按钮。其语法格式如下：

＜command type="按钮类型"label="按钮上显示内容"＞…＜/command＞

＜command＞元素的属性及描述见表3-5。

表3-5 command元素的属性及描述

该标签也常与menu元素结合使用，可以实现弹出式的下拉菜单，但单击菜单中的某个选项时，将执行相应的操作。

【例3-7】command标签实例，示例代码如下：

＜menu＞

＜command type="command"label="Save"onclick="save（）"＞Save＜/command＞

＜/menu＞