html meter标签的使用与作用详解-html tutorial-php.cn

html meter标签的使用与作用详解

黄舟

Lepaskan： 2017-06-29 14:06:49

asal

6353 orang telah melayarinya

定义和用法：
标签定义度量（单位）。仅用于已知最大和最小值的度量。

提示和注释：
注释：必须定义度量的范围，既可以在 text 中，也可以在 min/max 属性中定义。
例子：

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

Salin selepas log masuk

标签是HTML5新增的标签，定义度量衡。仅用于已知最大和最小值的度量。也就是必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。

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

Salin selepas log masuk

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

Salin selepas log masuk

可以用CSS的伪元素对默认的显示方式处理下（因为很可能各个浏览器的显示方式不一）：

<!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>

Salin selepas log masuk

实际显示效果：

Atas ialah kandungan terperinci html meter标签的使用与作用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!