进度与仪表控件

progress 元素如何表示进度？

• 语义: 表示任务的完成进度;
• max: 进度上限;
• value: 当前进度;
• 内容: 标签内的文本作为不支持时的反馈;

<progress id="file" max="100" value="30">30%</progress>

meter 元素如何表示度量？

• 语义: 表示已知范围内的度量值, 如油量、评分;
• min/max: 范围边界;
• value: 当前值;
• low/high: 把范围划分为低、中、高三段;

<meter id="fuel" min="0" max="100" low="13" high="66" optimum="80" value="70">at 70/100</meter>

meter 的颜色如何随值变化？

• optimum: 声明最优值所在的区间;
• 取值落在 optimum 区间: 显示绿色;
• 与 optimum 区间相隔一个区间: 显示黄色;
• 相隔两个区间: 显示红色;

与 optimum 区间的距离	颜色
0	绿
1	黄
2	红