进度／值显示 ‹meter› ‹progress›

Exisi 2020-06-03 11:25:15

Categories： Tags：

范围标量 <meter>

<meter>元素用来显示已知范围的标量值或者分数值

属性	描述
value	当前的数值。如果设置了最小值和最大值（分别由 min 属性和 max 属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为 0.如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值
min	值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为 0。
max	值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为 1。
low	定义了低值区间的上限值（译者注：如果 value 介于 min 和 low 之间，该元素就会表现出低值的视觉效果，value 落在 [min,low]、[high,max] 等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过 high 值和最大值。未设置或者比最小值还要小时，其值即为最小值。
high	定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于 low 值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。
optimum	这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了 low 和 high 属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和 low 之间，那么 lower 区间就被认为是更佳的取值范围。
form	该属性将本元素与对应的 form 元素关联。例如，一个计量器可能用来显示某个数值输入框（input 元素，number 类型）的范围。只有当计量器元素被用作表单关联的元素时，该属性才应当被使用；即便如此，如果它作为表单的后代元素出现，它仍然有可能被省略。

实例

<!DOCTYPE html>

<head>

</head>

<body>

<p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>

</body>

</html>

浏览器运行结果如下：

进度条 <progress>

<progress> 元素用来显示一项任务的完成进度。通常情况下，该元素都显示为一个进度条形式。

属性	描述
max	该属性描述了这个progress元素所表示的任务一共需要完成多少工作
value	该属性用来指定该进度条已完成的工作量。如果没有value 属性,则该进度条的进度为"不确定",也就是说，进度条不会显示任何进度，你无法估计当前的工作会在何时完成 (比如在下载一个未知大小的文件时，下载对话框中的进度条就是这样的).

实例