meter标签_html/css_WEB-ITnose
meter
meter元素标签用来表示范围已知且可度量的等级标量或分数值,如磁盘使用量比例、关键词匹配程度等。需要注意的是,meter不可以用来表示那些没有已知范围的任意值,例如重量、高度,除非已经设定了它们值的范围。meter元素共有6个属性:
Value:表示当前标量的实际值;如果不做指定,那么meter标签中的第一个数字就会被认为是其当前实际值,例如2 out of 10中的“2”;如果标签内没有数字,那么标量的实际值就是0。
Min:当前标量的最小值;如不做指定则为0。
Max:当前标量的最大值;如不做指定则为1;如果指定的最大值小于最小值,那么最小值会被认为是最大值。
Low:当前标量的低值区;必须小于或等于标量的高值区数字;如果低值区数字小于标量最小值,那么它会被认为是最小值。
High:当前标量的高值区。
Optimum:最佳值;其范围在最小值与最大值区间当中,并且可以处于高值区。
来看一些代码范例;首先,不设定任何属性的状况:
Your score is:
2 out of 10
然后呢,可以增加最大值与最小值的属性设定:
Your score is:
2 out of 10
增加了低值区、高值区和最佳值的属性设定:
Your score is:
A+
这时meter的最大值会被认为是100%或1。
下面这段代码可以用作节日倒计时:
Christmas is in
30 days!
meter标签中的内容可以不包含任何数字,这时最大值会被认为是1;可以参考以下的代码:
Moderate activity, Usenet, 618 subscribers
Low activity, Usenet, 22 subscribers
Low activity, Usenet, 66 subscribers
HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output
HTML meter 标签
上一篇: H5怎么实现在线预览PDF
下一篇: canvas绘制奥运五环代码分享
推荐阅读
-
基于淘宝弹性布局方案lib-flexible的问题研究_html/css_WEB-ITnose
-
求助个问题~~特别急~~在线等待~~~大神帮忙~~~_html/css_WEB-ITnose
-
《千与千寻》给读者带来了什么?_html/css_WEB-ITnose
-
CSS3实战开发:手把手教大家折角效果实战开发_html/css_WEB-ITnose
-
li空格问题_html/css_WEB-ITnose
-
CSS3实现了提交按钮等待打点循环效果_html/css_WEB-ITnose
-
盒模型的组件和注意事项_html/css_WEB-ITnose
-
请教jquery 控件显示div_html/css_WEB-ITnose
-
HTML前端开发之路--Transition_html/css_WEB-ITnose
-
CSS的padding用法详解_html/css_WEB-ITnose