h5：meter标签简介
本帖最后由 马黑黑 于 2022-5-27 07:58 编辑 <br /><br /><p>meter这个单词，一米两米的米的意思。在HTML5里，作为标签，meter是一个计量器。<br><br></p><p>meter标签简单语句：<meter min="0" max="100" value="20"></meter></p><p><br></p><p>效果：<meter min="0" max="100" value="20"></meter></p>
<p><br></p><p>简单语句的代码中，min意为“最小”，是计量器的起始值，一般定义为0，缺省时也是0；max意为“最大”，是计量器的最大计量值，缺省值为1，可根据需要设定该值；value意为“值”，上面效果中绿色计量色块条就是由value值决定的，它其实与进度条的进度是同等意义的，类似于指标完成量的含义。</p><p><br></p><p>meter标签有意思的地方是与众不同的，试看以下效果：</p><p><br></p>
<p><meter min="0" max="100" low="20" high="50" value="19"></meter></p>
<p><br></p><p>上面，“进度”色块的颜色不是用CSS定义出来的，它是因为我们在meter简单语句的基础上增加了其他的属性值：</p><p><br></p><p><meter min="0" max="100" low="20" high="50" value="19"></p><p><br></p><p>一个是 low，一个是 high，都是计量需要设置出来的属性。low，低的意思，high则是高的意思，应是将度量划分成不同等次的阈值或区间，从而更能生动地呈现度量。meter还有最后一个属性，optimum，最优之意，当它也参与其中，且此时value值小于 low 值，<meter min="0" max="100" low="20" high="50" optimum="80" value="19"></meter>：</p><p><br></p>
<p><meter min="0" max="100" low="20" high="50" optimum="80" value="19"></meter></p>
<p><br></p><p>meter标签的进度区间就是这三种颜色了，红黄绿，红表示任务完成量处于低级阈值，即小于 low 值，黄表示任务完成量处于中级阈值，即大于等于 low 小于 high，绿表示处于高级阈值，即大于等于 high 值。值得注意的是，红色要出现，optimum 属性必须出场。</p><p><br></p><p>不同的浏览器渲染 meter 计量器标签的形状和颜色不尽一致，但对meter标签的支持度都不错，除了 IE 和老的掉牙的安卓浏览器。</p> 好好学习天天向上{:4_199:} 加林森 发表于 2022-5-27 08:33
好好学习天天向上
{:4_189:} 马黑黑 发表于 2022-5-27 12:07
开心了哇。{:4_189:} 还可以这样设置出标签的进度，黑黑，我感觉只有系统学习了才会运用吧，我这三天打鱼,两天晒网的人学会运用很难的 这个标签的颜色设置十分奇特。其实这个算不得是颜色设置吧，只是meter标签自身需求的展示。 学习了，黑黑分享这个应该是准备用在什么上的吧。{:4_187:} 看到了，在《日月同辉》那个帖子里已经用上了{:4_199:} 怪不得昨天看到那个进度条就觉得为什么会变色，原来如此{:4_187:} 红影 发表于 2022-5-27 15:53
怪不得昨天看到那个进度条就觉得为什么会变色，原来如此
meter标签的实用性还是不错的，h5较之前的版本，更为贴切现实需求 小辣椒 发表于 2022-5-27 15:39
还可以这样设置出标签的进度，黑黑，我感觉只有系统学习了才会运用吧，我这三天打鱼,两天晒网的人学会运用 ...
你可以做点笔记，比如这个，作为一个条目记下来，以后需要用到了可以根据关键字在笔记里找到它 红影 发表于 2022-5-27 15:52
看到了，在《日月同辉》那个帖子里已经用上了
是吧，挺小巧的 加林森 发表于 2022-5-27 12:12
开心了哇。
必须开心 红影 发表于 2022-5-27 15:46
这个标签的颜色设置十分奇特。其实这个算不得是颜色设置吧，只是meter标签自身需求的展示。
对，你理解的完全正确 红影 发表于 2022-5-27 15:47
学习了，黑黑分享这个应该是准备用在什么上的吧。
很多场景都可以考虑用上它 马黑黑 发表于 2022-5-27 17:49
必须开心
好的好的 马黑黑 发表于 2022-5-27 17:48
meter标签的实用性还是不错的，h5较之前的版本，更为贴切现实需求
非常实用，H5考虑得还挺周全的呢。 马黑黑 发表于 2022-5-27 17:50
对，你理解的完全正确
还是黑黑讲解了才知道的啊，之前都不知道有这个标签{:4_173:} 红影 发表于 2022-5-28 21:31
还是黑黑讲解了才知道的啊，之前都不知道有这个标签
迟早会知道的 红影 发表于 2022-5-28 21:29
非常实用，H5考虑得还挺周全的呢。
对的
页:
[1]