文档章节

html5中progress/meter元素

o
 osc_zoa3moe9
发布于 2019/12/07 22:01
字数 509
阅读 32
收藏 0

精选30+云产品,助力企业轻松上云!>>>

html5中progress/meter元素

一、总结

一句话总结:

progress元素:用来建立一个进度条
meter元素的作用:用来建立一个度量条,用来表示度量衡的评定
<progress value="19" max="100"></progress>

<meter max="100" value="60" high="80" low="30"></meter>

 

 

二、html5--3.19 新增的progress/meter元素

 

学习要点

  • 了解progress/meter元素的用法

  • progress元素
    • 是HTML5中新增的元素,用来建立一个进度条
    • 通常与JavaScript 一同使用,来显示任务的进度。
    • 使用时注意浏览器的支持情况:Internet Explorer 9 以及更早的版本不支持
  • progress元素的属性:
    • max属性:规定当前进度的最大值。
    • value属性设定进度条当前默认显示值
    • form属性:规定进度条所属的一个或多个表单

  • meter元素
    • 是HTML5中新增的元素,用来建立一个度量,用来表示度量衡的评定
    • 通常与JavaScript 一同使用,来显示任务的进度。
  • meter元素的属性:
    • value属性设定进度条当前默认显示值
    • max属性:规定范围的最大值,默认值为1.
    • min属性:规定范围的最小值,默认值为0.
    • low属性:规定被视作低的标准。
    • high属性:规定被视作高标准。
    • optimum属性:定义度量条的最佳标准值
    • form属性:规定所属的一个或多个表单。

 

实例

 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7     <p style="color:#FF0000">
 8     
 9     </p>
10     <form action="L3_01.html" method="get" >
11         当前下载progress进度为:<br>
12         <progress value="19" max="100"></progress><br>
13         <br>
14         meter度量条:<br>
15         <meter max="100" value="20" high="80" low="30"></meter><br>
16         <meter max="100" value="60" high="80" low="30"></meter><br>
17         <meter max="100" value="60" high="80" low="30" optimum="60"></meter><br>
18         <meter max="100" value="90" high="80" low="30"></meter><br>
19         值分别为不同情况下的显示<br>
20         <br><input type="submit" value="确定">
21     </form>
22 <body>
23 </body>
24 </html>
View Code

 

 
o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
html5.js让IE(包括IE6)支持HTML5元素方法

html5.js让IE(包括IE6)支持HTML5元素方法 微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。 让IE(...

巴顿
2015/04/08
39
0
Html5新标签解释及用法

HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet a...

下坠ing-前端
2019/05/30
3
0
HTML5新增标签总结和说明

HTML5出来这么久,都没有真正的理解和花时间去看,经常看到一些网页的里面包含很多陌生的标签元素,一直不清楚是什么功能。像<article>、<aside>。 其实这两个标签和<div>的功能一样仅仅是一...

酱哥哥
2015/05/29
8.8K
0
H5表单新特性

1.HTML5表单新特性之——新的input type <input type=" "> HTML5之前已有的input type: text、password、radio、checkbox、file、submit、reset、button、image、hidden HTML5新增的input t......

osc_jbx0p2pm
2019/10/28
0
0
免费的HTML5连载来了《HTML5网页开发实例详解》连载(二)

2.1.1 最新的交互元素——内容交互、菜单交互、状态交互 HTML 5不仅仅只带来了一堆在语义上进行强化了的元素,同时在交互效果上也进行了极大的改变。也就是说,使用者可以在不使用JavaScrip...

柯南和由美
2014/07/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

阻塞锁,非阻塞锁,自旋锁,互斥锁

1.阻塞锁 多个线程同时调用同一个方法的时候,所有线程都被排队处理了。让线程进入阻塞状态进行等待,当获得相应的信号(唤醒,时间) 时,才可以进入线程的准备就绪状态,准备就绪状态的所有...

osc_umiwij2c
11分钟前
0
0
Asp.NetCore3.1 WebApi中模型验证

前言   不管是前端,还是后端,做数据合法性验证是避免不了的,这边文章就记录一下Asp.NetCore3.1 WebApi中的模型验证; 传统写法--不使用模型验证   来,先上图:   我相信,应该绝大...

osc_qgfjs4a5
12分钟前
21
0
龙芯开源社区上线.NET主页

龙芯团队从2019年7 月份开始着手.NET Core的MIPS64支持研发,经过将近一年的研发,在2020年6月18日完成了里程碑性的工作,在github CoreCLR 仓库:https://github.com/gsvm/coreclr, 随后受...

osc_bj12kvua
12分钟前
11
0
高并发下浏览量入库设计

一、背景 文章浏览量统计,low的做法是:用户每次浏览,前端会发送一个GET请求获取一篇文章详情时,会把这篇文章的浏览量+1,存进数据库里。 1.1 这么做,有几个问题: 在GET请求的业务逻辑里...

osc_uj3h5gt9
13分钟前
17
0
nginx timeout 配置 全局timeout 局部timeout web timeout

nginx比较强大,可以针对单个域名请求做出单个连接超时的配置. 比如些动态解释和静态解释可以根据业务的需求配置 proxy_connect_timeout :后端服务器连接的超时时间_发起握手等候响应超时时间...

osc_5cok9i01
15分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部