首页 » 编程语言 » html » 正文

HTML5元素meter标签的使用方法及作用

HTML5元素meter标签的使用方法及作用详解如下:

<meter>标签的定义

<meter> 标签是用来定义度量衡的,仅用于已知最大和最小值的度量。

比如:磁盘使用情况,查询结果等。

注意: <meter> 不能作为一个进度条来使用, 进度条progress标签

<meter>标签是双标签,但在<meter>和</meter>之间的元素内容是不可见的,也就是不在浏览器中显示;

<meter>标签是HTML5新增的标签。

浏览器支持情况

以下是不同浏览器支持<meter>元素的第一个浏览器的版本号:

chrome 8.0、Internet explorer/edge13.0、Firefox 6.0、safari6.0、Opera11.0    

<meter>标签的用法

用法1、<meter>标签定义度量衡为0%的情况

1、当<meter>标签无value属性、value属性值为空或为0时,整个度量衡区间为灰色。

2020-05-03_214608.png

2、当value属性值等于或小于min属性值时,整个度量衡区间为灰色。

2020-05-03_230642.png

但实际上,value属性值小于0或小于min属性值时,是没有意义的。

<meter>标签度量衡规则是:value属性值到min属性值区间占据min属性值到max属性值的比例

用法2:当只有value属性的情况下,min属性值默认为0,max属性值默认为1,因此,value属性值有以下三种情况:

第一种:value属性值小于等于0或min属性值时,整个度量衡区间为灰色;

第二种:value属性值大于或等于max属性值时,整个度量衡区间为绿色;

第三种:value属性值在min属性值和max属性值之间时,min到value的区间为绿色,而value到max区间为灰色;

2020-05-04_002744.png

用法3:<meter>标签度量衡显示比例

以下三种情况,度量衡显示比例一致

<meter value="0.2">20%</meter>
<meter value="2" min="0" max="10" >20%</meter>
<meter value="2" min="1" max="6" >20%</meter>

以上代码分析如下图所示:

2020-05-11_125934.png

用法4:<meter>标签度量衡颜色变化

当<meter>标签同时出现了min、max、low、high、value四个属性时,度量衡显示的颜色会有以下几种变化:

1、当value值在low和high之间时,显示为绿色;

<meter value="5" min="0"  low="3"  high="6"  max="10" ></meter>

以上代码在浏览器中显示效果如下:

2020-05-14_150547.png

2、当value值在min和low之间,或在high和max之间的时候,显示为黄色;

<meter value="2" min="0"  low="3"  high="6"  max="10" ></meter>
<meter value="8" min="0"  low="3"  high="6"  max="10" ></meter>

以上代码在浏览器中显示效果如下:

2020-05-14_150723.png

3、当<meter>标签同时出现了min、max、low、high、value、 optimum五个属性时,度量衡的颜色变化会有更多情况,还会出现红色;

<meter value="2" optimum="9" min="0" low="3" high="8"   max="10"  ></meter>
<meter value="9" optimum="2" min="0" low="3" high="8"   max="10"  ></meter>

以上代码在浏览器中显示效果如下:

2020-05-14_152540.png

相关连接html5中的meter标签度量衡颜色变化规则详解       

<meter>标签的属性

属性描述
formform_id

规定 <meter> 元素所属的一个或多个表单。

该属性默认值为0,可以给该属性指定浮点数小数值。

highnumber

设置范围最高的值。

如果该属性值小于low属性值,那么把low属性值视为high属性值;

如果该属性值大于max属性值,那么把max属性值视为high属性值。

lownumber

设置范围最低的值,必须小于或等于high属性值。

如果low属性值小于min属性值时,浏览器会把min属性值视为low属性值。

maxnumber

规定范围的最大值,默认值为1。

如果设定该属性值小于min属性的值,那么浏览器会把min设置为最大值。

minnumber

规定范围的最小值(值不可小于0),默认值为0。

optimumnumber

设置度量衡的最佳值。

必须在min属性值与max属性值之间,可以大于high属性值。

valuenumber

必需。设置度量的当前值。默认值为0,可指定浮点数小数值。

<meter>标签的value属性规定度量的当前值,是必需属性,而其余的属性是可选属性;



欢迎您发表评论或留言