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属性：规定所属的一个或多个表单。

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

     <p style="color:#FF0000">

     </p>

     <form action="L3_01.html" method="get" >

         当前下载progress进度为：<br>

         <progress value="19" max="100"></progress><br>

         <br>

         meter度量条：<br>

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

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

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

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

         值分别为不同情况下的显示<br>

         <br><input type="submit" value="确定">

     </form>

 <body>

 </body>

 </html>
 

html5中progress/meter元素的更多相关文章

  1. html5--3.19 新增的progress/meter元素

    html5--3.19 新增的progress/meter元素 学习要点 了解progress/meter元素的用法 progress元素 是HTML5中新增的元素,用来建立一个进度条 通常与Java ...

  2. 第一章 用HTML5中的结构元素构建网站

    1.当一个容器需要直接定义样式或通过脚本定义行为时,推荐使用div元素而非section元素. 2.section是需要标题的,而nav或aside没有标题也是可以的. 3.html5轮廓工具 htt ...

  3. 详解HTML5中的<aside>元素与<article>元素

    <aside>元素HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在.<aside>元素通常显示成 ...

  4. HTML5 中的Nav元素详解

    什么是Nav元素 Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在nav元素里面,我们只需要把最主要 ...

  5. Html5中的video元素

    最近在做门户的时候遇到要显示企业的视频介绍,需要找到一个在aspx页面播放视频的html,最后找到了是一段HTML5最新的html代码,如下: /// <summary> /// 播放视频 ...

  6. html5中新增的元素和废除的元素

    一.新增的结构元素 1.section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分.它可以与h1.h2.h3.h4.h5.h6等元素结合起来使用,标示文档结构. h5中的代码事 ...

  7. HTML5 中的meter 标签的样式设置

    meter { -webkit-appearance: none; position: relative; display: block; margin: 8px auto; width: 100px ...

  8. 笔记：HTML5中input元素新增的type值

    在HTML5中,input元素的type值增加了不少,使input的功能强大了很多. 但在各大浏览器中并不是所有的type值都支持. 以下是比较有用.并且浏览器支持的稍好一些的值: type=colo ...

  9. html5中的fieldset/legend元素和keygen元素

    html5中的fieldset/legend元素和keygen元素 一.总结 一句话总结: fieldset/legend元素和figure和figcaption很像,只不过是作用于表单,前者表示内容 ...

随机推荐

  1. 聊Java中的任务调度的实现方法及比较

    前言 任务调度是指基于给定时间点,给定时间间隔或者给定执行次数自动执行任务.本文由浅入深介绍四种任务调度的 Java 实现: Timer ScheduledExecutor 开源工具包 Quartz ...

  2. kubernetes-使用kubeadm部署kubernetes集群

    k8s官网介绍 Kubernetes是一个可移植的,可扩展的开源平台,用于管理容器化的工作负载和服务,可促进声明式配置和自动化.它拥有一个庞大且快速增长的生态系统.Kubernetes的服务,支持和工 ...

  3. 分配swap分区空间

    1. 分区,并修改为swap分区ID [root@centos2 ~]# fdisk /dev/sdb 欢迎使用 fdisk (util-linux ). 更改将停留在内存中,直到您决定将更改写入磁盘 ...

  4. Java&Selenium自动化测试之Page Object Model

    PO是什么: 1.页面对象模型(PO)是一种设计模式,用来管理维护一组web元素的对象库 2.在PO下,应用程序的每一个页面都有一个对应的page class 3.每一个page class维护着该w ...

  5. 《少年先疯队》第九次团队作业：Beta冲刺第二天

    2.1 今日完成任务情况 姚玉婷:房间管理功能测试文档的编写 马丽莎:酒店系统中商品管理功能的完善 张   琼:商品管理功能的测试 孙苗坤:商品管理功能的测试 2.2 明天任务安排 姚玉婷:酒店系统中 ...

  6. vue 博客知识点汇总

    1. vue修改url,页面不刷新 项目中经常会用到同一个页面,结构是相同的,我只是在vue-router中通过添加参数的方式来区分状态,参数可以在页面跳转时带上params,或者query,但是有一 ...

  7. 利用Python3的requests和re库爬取猫眼电影笔记

    以下笔记,作为参考借鉴,如有疑问可以联系我进行交流探讨! 代码思路很简单,简单概括为:   首先利用requests的get方法获取页面的html文件,之后对得到的html文件进行相对应的正则处理,然 ...

  8. CheckList 如何梳理可减少上线的验证时间（总结篇）

    对CheckList的执行发起的思考? (1)功能越来越多,CheckList越补充越多,执行CheckList时间越来越长,如何减少上线的验证时间?(2)减少上线验证的时间外,如何保证质量?上线后少 ...

  9. Python通过logging记录日志并应用coloredlogs在控制台输出有色字体

    import logging import os from logging.handlers import TimedRotatingFileHandler import coloredlogs # ...

  10. 如何从notepad++的偏移量查找

    有的时候报错的会把偏移量直接报错给我们,我就需要根据偏移量定位我们的错误. 比如他报错偏移量1009. 做搜索(按Ctrl + F) 选择Regular expressions并确保有. matche ...