html - HTML5 标签属性

Question

<meter>HTML5 规范中有一个新标签。它具有三个属性，很容易理解，但它们的功能和视觉效果却不是很清楚。它们是高、低和最佳的。

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

谁能帮我描述一下？

Answer 1

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

• 如果low < optimum < high：

  • 如果值为 <low或 > high，则显示为黄色，
  • 否则为绿色（最佳无效）。

• 如果low < high < optimum：

  • 如果值为< low，则显示为红色。
  • 如果值为< high，则显示为黄色。
  • 否则为绿色。

• 如果optimum < low < high：

  • 如果值为> high，则显示为红色。
  • 如果值为> low，则显示为黄色。
  • 否则为绿色。

这实际上是规范所说的：

仪表区域的 UA 要求：如果最佳点等于低边界或高边界，或者它们之间的任何地方，那么规范的低边界和高边界之间的区域必须被视为最佳区域，并且低和高部分，如果任何，必须被视为次优。否则，如果最优点小于低边界，则最小值和低边界之间的区域必须被视为最优区域，从低边界到高边界的区域必须被视为次优区域, 剩下的区域必须被视为一个更差的区域。最后，如果最优点高于高边界，则情况相反；高边界和最大值之间的区域必须被视为最佳区域，

我们使用绿色表示最佳区域，黄色表示次优区域，红色表示更差的区域。

顺便说一句，您可以为<meter>元素设置样式（请参阅如何设置 HTML5 <meter> 标签的样式）。

Answer 2

了解这 3 个部分（低、最佳、高）的功能和视觉效果取决于仪表元素上指定的属性及其值；相同的值可以根据其段的类型以不同的颜色（绿色/黄色/红色）显示

要清楚地了解仪表颜色、值、段，请观看此视频