HTML页面交互元素

HTML5是一些独立特性的集合，其中不仅添加了许多web页面特性，而且其本身也是一个应用程序。

details元素和summary元素

details元素用于描述文档或文档某个部分的细节。

summary元素经常与details元素配合使用作为details元素的第一个子元素，用于details定义标题。

标题是可见的，当用户单击标题时，会显示或隐藏details中的其他内容。

下面通过一个案例对details元素和summary元素的用法进行演示：

 

 

 

运行效果如图所示：

 

 

 

progress元素

progress元素用于表示一个任务完成的进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成；

也可以用0到某个最大数字之间的数字来表示准确的进度完成情况。

progress元素的常用属性值有以下2个：

• value：已经完成的工作量
• max：总共有多少工作量

需要注意的是，value和max属性的值必须大于0，且value的值要小于或等于max的值。

下面通过一个案例对progress元素的用法进行演示：

 

运行效果如图所示：

 

 

 meter元素

meter元素用于表示指定范围内的数值。

meter元素的常用属性：

属性	说明
high	定义度量的值位于哪个值之上会被界定为高
low	定义度量的值位于哪个值之下会被界定为低
max	定义最大值，默认值为1
min	定义最小值，默认值为0
optimum	定义什么样的值为最佳值。如果该值高于high属性的值，意味着值越高越好；如果该值低于low属性的值，这意味着越低越好
value	定义度量的值

下面通过一个案例对meter元素的用法进行演示：

 

 

运行效果如图所示：