前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML标签 progress or meter 进度条

HTML标签 progress or meter 进度条

作者头像
用户7146828
发布2021-08-09 15:01:22
2K0
发布2021-08-09 15:01:22
举报
文章被收录于专栏:旧云博客旧云博客

有些有些情况下,我们在页面需要用到进度条

如果手写的化还需要判断宽度、百分比等问题

在html中,progress标签是html5中新增的标签,是定义运行中的任务进度/进程,通常和JavaScript一起使用来实现进度条。

注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用 <meter> 标签代替。 (这不一样的吗?而且progress可以自定义最大值) 就像这样!

90%:内容 50%: 30%: 150%:

代码语言:javascript
复制
90%:<progress value="90" max="100">内容</progress>
50%:<progress value="50" max="100"></progress>
30%:<progress value="30" max="100"></progress>
150%:<progress value="150" max="200"></progress>

这是对于没有进度条的主题而言,然而现在大多数主题都有自带的进度条! 像这样

内容

内容

关于meter 注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签

代码语言:javascript
复制
<p>显示度量值:</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value=".6">60%</meter>

属性 值 描述 form form_id 规定 <meter> 元素所属的一个或多个表单 high number 规定被视作高的值的范围 low number 规定被视作低的值的范围 max number 规定范围的最大值 min number 规定范围的最小值 optimum number 规定度量的优化值 value number [必需]规定度量的当前值

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021年05月19日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档