progress标签：
从名字上来看，估计大家也能猜到这个标签是什么标签了，没错，他是一个进度条。在HTML5中我们终于可以不用模拟了。

  1. <progress id="W3Cfuns_progress" max="100"></progress>

复制代码

progress属性：
value：表示当前进度
max：表示总进度
注：value和max属性的值必须大于0，value的值小于或等于max属性的值。

案例：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>HTML5每日一练progress标签的应用</title>
  6. </head>
  7. <body>
  8. <h1>W3Cfuns-HTML5每日一练progress标签的应用</h1>
  9. <p>完成百分比：<progress id="W3Cfuns_progress" max="100"></progress></p>
  10. </body>
  11. </html>

HTML5每日一练之progress标签的应用的更多相关文章

  1. HTML5每日一练之视频标签的应用

    与音频一样,在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视 ...

  2. HTML5每日一练之figure新标签的应用

    igure元素是一种元素的组合,可带有标题(可选).figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响.figure所表示的内容可以是图片.统计图或代码示例 ...

  3. HTML5每日一练之details展开收缩标签的应用

    details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...

  4. HTML5每日一练之input新增加的5种其他类型1种标签应用

    今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color 注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好 ...

  5. HTML5每日一练之OL列表的改良

    在HTML5中的OL被改良了,为它增加了两个新属性. start属性:start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&qu ...

  6. HTML5每日一练之input新增加的六种时间类型应用

    今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chr ...

  7. HTML5每日一练之input新增加的URL类型与email类型应用

    1.URL类型: <form> <input name="urls" type="url" value="http://www.w3 ...

  8. JavaScript----Js操控-HTML5 <progress> 标签

    Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...

  9. JavaScript学习笔记-Js操控HTML5 <progress> 标签

    Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...

随机推荐

  1. js之dom_1

    DOM    ie中有dom对象都是com对象的形式实现的    操作dom时,要注意返回的节点列表.属性列表都是动态的,会随着操作的改变而实时改变    document.getElementByI ...

  2. Tyvj 1030 乳草的入侵

    以一个简单的BFS对基础搜索做一个收尾好了. 给一个草,然后以这棵草为九宫格的中心,每周向周围八个方向扩散,问多少个星期能把这个农场占满. 遍历整个map,最后一个出队列的对应的星期数就是所求. // ...

  3. HDU 1505 City Game

    这题是上一题的升级版 关键在于条形图的构造,逐行处理输入的矩阵,遇到'F'则在上一次的条形图基础上再加1,遇到'R'则置为0 然后用上一题的算法,求每行对应条形图的最大矩阵的面积. 另外:本来是deb ...

  4. Git之 手把手教你使用Git

    一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...

  5. cakephp之查询

    find public find( string $type 'first' , array $query array() ) Queries the datasource and returns a ...

  6. [Mac][MySQL]如何启动MySQL Server

    方法来自 MySQL 5.7官方手册 http://dev.mysql.com/doc/refman/5.7/en/osx-installation-launchd.html 有两种方法,另一种是命令 ...

  7. 【转】Qt多线程操作界面---在QThread更新QProgressBar

    #include <QApplication> #include <QThread> #include <QMainWindow> #include <QPr ...

  8. 部署在IIS服务器的asp.net 网站，禁止访问指定类型文件

    网站上的一些文件不希望用户访问,可以通过下面的方式简单实现.不需写代码(在IIS6下试验过). 第一步,在IIS中实现映射. 哪些文件需要特殊处理. 通俗的将就是将哪种类型的文件交给特定的工厂来处理. ...

  9. T-SQL备忘(4)：分页

    set statistics io on set statistics time on --SQL Server 2012分页方式 select * from Production.Product o ...

  10. 使用rsync+inotify+apache做分布式图片服务器的部署方法

    图片服务器一般是做成分布式的,但要使得所有的图片服务器的文件一致,可以由一个主服务器将文件推送到各个备份服务器上. rsync:文件差异检查及文件推送 inotify:事件触发,实时检测到添加.删除. ...