页面交互元素-六六互联

页面交互元素

发布时间：2022-08-11编辑：zhushican阅读（264）

1.details和summary元素

details元素用于描述文档或文档某个部分的细节。summary元素经常与details 元素配合使用，作为details 元素的第一个子元素，用于为details定义标题。标题是可见的，当用户点击标题时，会显示或隐藏details中的其他内容, 其基本格式应用代码如下：

<ul>

</ul>

</details>

页面交互元素

2.progress元素

progress元素用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。progress元素的常用属性值有两个，value：已经完成的工作量,max：总共有多少工作量, 其基本格式应用代码如下：

<h1>我的工作进展</h1>

页面交互元素

3.meter元素

meter元素用于表示指定范围内的数值。例如，显示硬盘容量或者对某个后选者的投票人数占投票总人数的比例等，都可以使用meter元素。

meter元素有多个常用的属性，如表2-15所示。

表2-15 meter元素常用属性

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

meter元素，其基本格式应用代码如下：

<h1>学生成绩列表</h1>

<p>

小红：<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter><br/>

小明：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter><br/>

小李：<meter value="75" min="0" max="100" low="60" high="80" title="75分" optimum="100">75</meter><br/>

</p>

页面交互元素