Was bedeutet das HTML5-Meter-Tag? Ausführliche Erläuterung der Verwendung des Meter-Tags

寻∝梦
Freigeben: 2018-08-31 16:24:41
Original
9347 Leute haben es durchsucht

本篇文章为大家介绍了关于HTML5中的meter标签的解释和实例,还有meter标签的属性介绍,最后是meter度量衡如何改变颜色。接下来我们就一起来看这篇文章吧

首先我们得先了解HTML5 meter标签是什么意思?

标签定义度量衡。仅用于已知最大和最小值的度量。是HTML5中的新标签,定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定义。

再来说说HTML5 meter标签的属性:

Was bedeutet das HTML5-Meter-Tag? Ausführliche Erläuterung der Verwendung des Meter-Tags

来看看关于meter标签的实例:

使用 meter 元素来度量给定范围(gauge)内的数据:

<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>
Nach dem Login kopieren

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值在红色区域的时候,整个就会呈现出红色

Was bedeutet das HTML5-Meter-Tag? Ausführliche Erläuterung der Verwendung des Meter-Tags

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

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

Was bedeutet das HTML5-Meter-Tag? Ausführliche Erläuterung der Verwendung des Meter-Tags

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

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

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

Was bedeutet das HTML5-Meter-Tag? Ausführliche Erläuterung der Verwendung des Meter-Tags

以上就是本篇文章的全部内容了,想看更多,欢迎到PHP中文网学习更多的课程。有问题的可以在下方提问

【小编推荐】

html中的ol标签如何去掉标号呢?

    标签的使用方法总结

HTML中ul标签如何去掉点?HTML无序列表的样式实例解析

Das obige ist der detaillierte Inhalt vonWas bedeutet das HTML5-Meter-Tag? Ausführliche Erläuterung der Verwendung des Meter-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage