meter tag_html/css_WEB-ITnose

meter

meter element tag is used to represent a scalar or fractional value with a known and measurable range, such as disk usage ratio, keyword matching degree, etc. It should be noted that meter cannot be used to represent any value that has no known range, such as weight and height, unless the range of their values ​​has been set. The meter element has a total of 6 attributes:

Value: Indicates the actual value of the current scalar; if not specified, the first number in the meter tag will be considered its current actual value, such as 2 out of "2" in 10; if there are no numbers in the label, the actual value of the scalar is 0.
Min: The minimum value of the current scalar; if not specified, it is 0.
Max: The maximum value of the current scalar; if not specified, it is 1; if the specified maximum value is less than the minimum value, then the minimum value will be considered the maximum value.
Low: The low value area of ​​the current scalar; must be less than or equal to the high value area number of the scalar; if the low value area number is less than the scalar minimum value, then it will be considered the minimum value.
High: The high value area of ​​the current scalar.
Optimum: the best value; its range is between the minimum value and the maximum value, and can be in the high value area.
Let’s look at some code examples; first, without setting any attributes:

<p>Your score is:  <meter>2 out of 10</meter></p>

Then, you can add maximum and minimum attribute settings:

<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p>

Added attribute settings for low value area, high value area and optimal value:

<p>Your score is: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>

At this time, the maximum value of meter will be considered as 100% or 1.

The following code can be used as a holiday countdown:

<p>Christmas is in <meter value ="30" min="1" max="366" title="days">30 days!</p>

The content in the meter tag does not need to contain any numbers, in which case the maximum value will be considered to be 1; you can refer to the following Code:

<p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p><p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p><p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>

Concise version of HTML5 study notes (4): new elements video, audio, meter, datalist, keygen, output

HTML meter tag