Detailed explanation of the use and function of html meter tag-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Detailed explanation of the use and function of html meter tag

黄舟

Jun 29, 2017 pm 02:06 PM

html effect

Definition and usage:
tag defines the measurement (unit). Use only for measurements with known maximum and minimum values.

Tips and Comments:
Comment: The range of the measure must be defined, either in text or in the min/max attributes.
Example:

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

Copy after login

tag is a new tag in HTML5, which defines weights and measures. Use only for measurements with known maximum and minimum values. That is, the range of the measure must be defined, either in the text of the element or in the min/max attributes.

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

Copy after login

high    number    定义度量的值位于哪个点，被界定为高的值。    
low    number    定义度量的值位于哪个点，被界定为低的值。    
max    number    定义最大值。默认值是 1。    
min    number    定义最小值。默认值是 0。    
optimum    number    定义什么样的度量值是最佳的值。如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。    
value    number    定义度量的值。

Copy after login

You can use CSS pseudo-elements to process the default display mode (because the display methods of each browser may be different):

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Coolwp.net Demo</title>
    <style>
    .deal meter { -webkit-appearance: none; }
.deal ::-webkit-meter-bar {
    height: 1em;
    background: white;
    border: 1px solid black;
}
.deal ::-webkit-meter-optimum-value { background: green; } /* 好 */
.deal ::-webkit-meter-suboptimum-value { background: orange; } /* 凑合 */
.deal ::-webkit-meter-even-less-good-value { background: blue; }   /* 糟糕 */
 
.deal ::-moz-meter-bar {
    background: rgba(0,96,0,.6);
}</style>
</head>
<body>
 
<p>
    默认的：<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
    <meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
    <meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
</p>
<p class="deal">
    处理后的：<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
    <meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
    <meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
</p>
</body>
</html>

Copy after login

Actual display effect:

Detailed explanation of the use and function of html meter tag

The above is the detailed content of Detailed explanation of the use and function of html meter tag. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn