• 技术文章 >web前端 >H5教程

    html5 meter标签是什么意思?html5 meter度量衡如何改变颜色详解

    寻∝梦寻∝梦2018-08-17 13:41:36原创1955
    html5 meter标签是什么意思?html5 meter度量衡如何改变颜色详解.本篇文章主要给大家说的就是html5 meter标签的定义和用法,还有关于html5 meter度量衡如何改变颜色的详细介绍

    html5 meter标签的定义和用法:

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

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

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

    这有实例:

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

    什么是meter元素:

    meter元素表示规定范围内的数量值。meter元素有6个属性!

    1.value属性:在元素中特地地表示出来的实际值。该属性值默认为0,可以为该属性制定一个浮点小数值。

    2.min属性:指定规定范围时允许实用的最小值,默认0,在设定该属性时所设定的值不能小于0。

    3.max属性:指定规定的范围时允许使用的最大值,如果设定时该属性值小于min的值,那么把min属性的值视为最大值。max属性的默认值1。

    4.low属性:规定范围的下限值,必须小于或者等于high的值。

    5.high属性:规定范围的上限值。如果该属性值小于low属性的值,那么把low属性的值视为high属性的值,同样如果该属性的值大于max属性的值,那么把max属性的值视为high的值。

    6.optimum属性:最佳值属性值必须在min属性值与max属性值之间,可以大于high属性值。

    html5 meter度量衡如何改变颜色:

    在meter中要想改变颜色,需要用到五个值,分别是:min(最小值)、max(最大值)、low、high、value和optimum,其中前四个值会把整个进度划分成3区间,

    绿色:当value和optimum值在一个区间时,它就会呈现出绿色。

    黄色:当optimum在high和max之间的时候,value在low和high之间,它就会呈现出黄 色

    当optimum在low和high之间的时候,value值在min和low之间,在high和max 之间的时候就会呈现出黄色。

    当optimum在min和low之间的时候,value值在low和high之间会呈现出黄色。

    红色:当optimum在high和max之间的时候,value值在min和low之间时就会呈现出红 色。

    当optimum在min和low之间的时候,value在high和max之间就会呈现出红色。

    当optimum在绿色区域的时候,value也在绿色区域的时候,整个就会呈现出绿色

    当optimum在绿色区域的时候,value值在黄色区域的时候,整个就会呈现出黄色

    当optimum在绿色区域的时候,value值在红色区域的时候,整个就会呈现出红色

    当optimum在绿色区域的时候,valu值在中间绿色区域是为绿色

    当optimum在绿色区域的时候,value值在min和low之间和在high和max之间时都呈现出黄色

    当optimum在绿色区域的时候,value也在绿色区域的时候,整个就会呈现出绿色

    当optimum在绿色区域的时候,value值在黄色区域的时候,整个就会呈现出黄色

    当optimum在绿色区域的时候,value值在红色区域的时候,整个就会呈现出红色

    HTML 4.01 与 HTML 5 之间的差异:

    <meter> 标签是 HTML 5 中的新标签。

    【相关推荐】

    HTML <fieldset> 标签的具体用法是什么?怎么用fieldset设置边框颜色?

    HTML<option>的属性有哪些?option selected属性的具体用法介绍

    以上就是html5 meter标签是什么意思?html5 meter度量衡如何改变颜色详解的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:html5 main标签是什么意思?html5 main标签作用的详细介绍 下一篇:element-ui对话框可拖拽的功能如何实现?(附代码)
    VIP会员

    相关文章推荐

    • 低版本IE正常运行HTML5+CSS3网站的3种解决方案_经验交流• 三个不常见的 HTML5 实用新特性简介_经验交流• Javascript HTML5 Canvas实现的一个画板_javascript技巧• 详解HTML5 Canvas绘制时指定颜色与透明度的方法_html5教程技巧• 深入解析HTML5 Canvas控制图形矩阵变换的方法_html5教程技巧

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网