html 미터 태그의 사용법과 기능에 대한 자세한 설명-HTML 튜토리얼-php.cn

html 미터 태그의 사용법과 기능에 대한 자세한 설명

黄舟

풀어 주다： 2017-06-29 14:06:49

원래의

6311명이 탐색했습니다.

정의 및 사용법:
태그는 측정(단위)을 정의합니다. 최대값과 최소값이 알려진 측정에만 사용하십시오.

팁 및 Notes:
참고: 측정 범위는 텍스트 또는 최소/최대 속성으로 정의되어야 합니다.
예:

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

로그인 후 복사

태그는 가중치와 측정값을 정의하는 HTML5의 새로운 태그입니다. 최대값과 최소값이 알려진 측정에만 사용하십시오. 즉, 요소의 텍스트나 최소/최대 속성에서 측정 범위를 정의해야 합니다.

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

로그인 후 복사

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

로그인 후 복사

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>

로그인 후 복사

실제 표시 효과:

html 미터 태그의 사용법과 기능에 대한 자세한 설명