整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
html5版本中新增了很多新标签，今天要介绍的就是其中一个，即meter标签。meter标签由于是html5新增标签，目前IE浏览器还不支持，所以用的还不是很多。
“meter”作为英文单词有“计量器”的意思，那它作为html中的标签又是用来做什么的呢？接下来我们一起来看看html中meter标签的定义及用法吧！
一、meter标签定义及用法
在html中，meter标签是html5版本中新增标签，是使用来定义已知范围或分数值内的标量测量（比如：磁盘用量、相关性等等）。
meter标签的效果很像进度条，但是它不作为进度条来使用。如果要表示进度条，通常使用progress标签。
二、meter标签语法格式
<meter value="值"></meter>
说明：
meter标签是双标签，但是标签中的内容不在浏览器中显示；meter标签的value属性规定度量的当前值，是必需属性，其余的属性是可选属性；
三、meter标签属性
value：规定度量的当前值，必需参数；form：规定meter标签元素所属的一个或多个表单；high：规定被视作高的值的范围；low：规定被视作低的值的范围；max：规定范围的最大值；min：规定范围的最小值；optimum：定度量的优化值；
四、实例
<!DOCTYPE html><html><head>
<meta charset="utf-8" />
<title>html中meter标签的详细介绍</title>
</head>
<body style="background-color: bisque;">
<h3>meter标签演示</h3>
十分之七：<meter value="7" min="0" max="10">十分之七</meter><br>
80%：<meter value="0.8">80%</meter>
<h4>IE浏览器目前不支持 meter标签</h4>
</body></html
运行结束：
以上就是关于meter标签的详细介绍，除了各种标签的运用，web前端还有很多知识点需要学习。关注“武汉千锋”微信公众号，可获取更多前端行业动态及学习资料。
们经常见到如图中的进度条，那么这些进度条都是怎么是实现的呢？
来看看下面这两个元素。
1、<meter>:用于表示一个已知最大值和最小值的计数仪表。比如电池的剩余电量、速度表等。除了可以指定id、style、class、hidden等通用属性之外，还可以指定下面属性。
value：指定计数仪表的当前值，默认为0，可以为该属性指定一个浮点小数值。
min：指定计数仪表的最小值，默认为0，可以为该属性指定一个浮点小数值。
max：指定计数仪表的最大值，默认为1，可以为该属性指定一个浮点小数值。
low：指定计数仪表指定范围的最小值，该属性值必须大于等于min属性指定的值。
high：指定计数仪表指定范围的最大值，该属性值必须小于等于max属性指定的值。
optimum：指定计数仪表有效范围的最佳值，如果该值大于high属性指定的值，则意味着值越大越好；如果该值小于low属性指定的值，则意味着值越小越好。
2、<progress>：用于表示一个进度条，除了id、style、class、hidden这些通用属性外，还可以指定以下属性。
max：指定进度条完成时的值。
value：指定进度条当前完成的进度值。
例
使用 meter 元素展示给定的数据范围：
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
浏览器支持
Firefox、Opera、Chrome 和 Safari 6 支持 <meter> 标签。
标签定义及使用说明
<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。
比如：磁盘使用情况，查询结果的相关性等。
注意： <meter> 不能作为一个进度条来使用， 进度条 <progress> 标签。
HTML 4.01 与 HTML5 之间的差异
<meter> 是 HTML5 的新标签。
属性
New：HTML5 新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| formNew | form_id | 规定 <meter> 元素所属的一个或多个表单。 |
| highNew | number | 规定被界定为高的值的范围。 |
| lowNew | number | 规定被界定为低的值的范围。 |
| maxNew | number | 规定范围的最大值。 |
| minNew | number | 规定范围的最小值。 |
| optimumNew | number | 规定度量的最优值。 |
| valueNew | number | 必需。规定度量的当前值。 |
全局属性
<meter> 标签支持全局属性，查看完整属性表 HTML全局属性。
事件属性
<meter> 标签支持所有 HTML事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
