HTML5标记<meter>属性

Question

在<meter>规范中有一个名为HTML5的新标记。它有三个属性是如此清晰的理解，但它们的功能和视觉效果不那么清楚。它们是高的、低的和最优的。

我看到了一些红色或黄色的仪表元素，我猜这些颜色与这些属性有关。但我不知道怎么做。

有人能给我描述一下吗？

Answer 1

规范并没有真正指定颜色。对于默认样式，在Firefox 22和Safari 6中，

• 如果是low < optimum < high

- If the value is < `low` or > `high`, it is displayed as yellow, 
- Otherwise green (optimum has not effect).

​

• 如果是low < high < optimum

- If the value is `< low`, it is displayed as red.
- If the value is `< high`, it is displayed as yellow.
- Otherwise green.

​

• 如果是optimum < low < high

- If the value is `> high`, it is displayed as red.
- If the value is `> low`, it is displayed as yellow.
- Otherwise green.

​

实际上这就是斯派克

UA对各区域的要求:如果最优点等于低边界或高边界，或它们之间的任何地方，则必须将该规的低边界和高边界之间的区域视为最佳区域，如果存在，则必须将低和高部分视为次优区域。否则，如果最优点小于低边界，则必须将最小值和低边界之间的区域视为最优区域，从低边界到高边界的区域必须被视为次优区域，其余区域必须被视为更好的区域。最后，如果最优点高于高边界，则情况发生逆转，高边界与最大值之间的区域必须被视为最佳区域，从高边界到低边界的区域必须被视为次优区域，其余区域必须被视为更不理想的区域。

我们使用绿色作为最佳区域，黄色代表次优区域，红色代表更少的好区域。

顺便说一句，您可以对<meter>元素进行样式设置(请参阅标签)。

Answer 2

理解这三个片段(低、最佳、高)的功能和视觉效果取决于在米元素及其值上指定的属性；同一值可以以不同的颜色(绿色/黄色/红色)显示，取决于其分段的类型。

要清楚地理解仪表的颜色、值、分段观看这段视频