HTML5教程-meter标签的应用

最新推荐文章于 2023-08-23 20:57:38 发布

yixuan_1

最新推荐文章于 2023-08-23 20:57:38 发布

阅读量1.8k

点赞数

分类专栏：精通HTML5 文章标签： html5 web前端 html meta

精通HTML5 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

HTML5教程-meter标签的应用

meter标签：

此标签与progress百分比标签差不多，它主要表现规定范围内的数量值，例如磁盘的食用量，对某个候选者人数占总投票人数的比例值等，如下图：

meter有六个属性：

属性名称	描述
value	在元素中表现出来的实际数量值。该属性缺省值为0，可以给该属性指定浮点数小数值。
min	指定规定范围时允许使用的最小值，该属性缺省值为0，设置最小值时，值不可小雨0。
max	指定规定范围时允许使用的最大值，如果设定该属性值小于min属性的值，那么浏览器会把min设置为最大值。max属性缺省值为1。
low	规定范围的下限值，必须小于或等于high属性的值。同样的，如果low属性值小于min属性值，那么浏览器把min属性的值视为low属性的值。
high	规定范围的上限值，如果该属性值小于low属性值，那么把low属性值视为high属性值，同样的，如果该属性值大于max属性值，那么把max属性值视为high属性的值。
optimum	设置最佳值，属性值必须在min属性值与max属性值之间，可以大于high属性值。

案例

  
  <!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>HTML5每日一练meter标签的应用</title> 
    </head> 
     
    <body> 
        <h1>W3Cfuns-HTML5每日一练meter标签的应用</h1> 
        <p>空间剩余大小：<meter min="0" max="1024" value="600">600/1024</meter>600/1024 GB</p> 
        <p>您的得分是：<meter min="0" max="100" low="60" high="90" optimum="100" value="91">91分</meter>91分</p> 
    </body> 
</html>

给meter定义样式并通过JS来控制显示的案例：点击预览

本文原地址：http://www.sitejs.cn/sitejs-12738-1.html

yixuan_1

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML5教程-meter标签的应用

HTML5教程-meter标签的应用meter标签：此标签与progress百分比标签差不多，它主要表现规定范围内的数量值，例如磁盘的食用量，对某个候选者人数占总投票人数的比例值等，如下图：meter有六个属性：属性名称描述value在元素中表现出来的实际数量值。该属性缺省值为0，可以给该属性指定浮点数小数值。
复制链接

扫一扫