What does the html5 meter tag mean? Detailed explanation of how to change the color of html5 meter

html5 What does the meter tag mean? Detailed explanation of how html5 meter changes color. This article mainly tells you the definition and usage of html5 meter tag, as well as a detailed introduction on how html5 meter changes color

html5 meter tag Definition and Usage:

label defines a weight or measure. Use only for measurements with known maximum and minimum values.

For example: disk usage, correlation of query results, etc.

Note: cannot be used as a progress bar, progress bar tag.

Here are examples:

<meter min="0" max="20">5</meter>
<meter>2 out of 10</meter>
<meter>30%</meter>

What is the meter element:

The meter element represents a quantitative value within a specified range. The meter element has 6 attributes!

1.value attribute: the actual value specifically expressed in the element. The attribute value defaults to 0, and a floating point decimal value can be specified for this attribute.

2.min attribute: The minimum practical value allowed when specifying the specified range. The default value is 0. The value set when setting this attribute cannot be less than 0.

3.max attribute: The maximum value allowed when specifying the specified range. If the attribute value is less than the min value when setting, then the min attribute value is regarded as the maximum value. The default value of max attribute is 1.

4.low attribute: The lower limit value of the specified range must be less than or equal to the value of high.

5.high attribute: specifies the upper limit of the range. If the value of the attribute is less than the value of the low attribute, then the value of the low attribute is regarded as the value of the high attribute. Similarly, if the value of the attribute is greater than the value of the max attribute, then the value of the max attribute is regarded as the value of high.

6.optimum attribute: The optimal value attribute value must be between the min attribute value and the max attribute value, and can be greater than the high attribute value.

html5 How to change the color of meter:

To change the color in meter, you need to use five values, namely: min (minimum value), max (maximum value), low, high, value and optimization, the first four values ​​will divide the entire progress into 3 intervals,

Green: When the value and optimization values ​​are in the same interval, it will appear green.

Yellow: When the optimum is between high and max, and the value is between low and high, it will appear yellow

When the optimum is between low and high , when the value is between min and low, it will appear yellow when it is between high and max.

When the optimum is between min and low, the value will appear yellow between low and high.

Red: When the optimum is between high and max, the value will appear red when the value is between min and low.

When the optimum is between min and low, the value will appear red between high and max.

When the optimization is in the green area and the value is also in the green area, the whole thing will appear green

When the optimization is in the green area and the value is in the yellow area, The whole thing will appear yellow

When the optimization is in the green area and the value is in the red area, the whole thing will appear red

When the optimization is in the green area, the value The middle green area is green

When the optimal is in the green area, the value is yellow between min and low and between high and max

When the optimal is in When the value is in the green area and the value is in the green area, the whole thing will appear green

When the optimization is in the green area and the value is in the yellow area, the whole thing will appear yellow

When the optimization is in the green area and the value is in the red area, the whole thing will appear red

The difference between HTML 4.01 and HTML 5:

tag is a new tag in HTML 5.

【Related recommendations】

What is the specific usage of HTML