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--3.19 新增的progress/meter元素的更多相关文章

  1. html5中progress/meter元素

    html5中progress/meter元素 一.总结 一句话总结: progress元素:用来建立一个进度条 meter元素的作用:用来建立一个度量条,用来表示度量衡的评定 <progress ...

  2. Html5中input新增的表单元素和属性介绍。

    input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...

  3. HTML5新增的主体元素和新增的非主体结构元素

    HTML5新增的主体元素 article元素 article元素表示文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的 ...

  4. HTML5新增的非主体结构元素

    -------------------siwuxie095                                 HTML5 新增的非主体结构元素         1.header 元素   ...

  5. html5学习（新增元素）

    来源于<实战html5>contenteditable 规定是否可编辑元素的内容 css3圆角 border-radius旋转变换 transform:rotate(); 变换 trans ...

  6. HTML5学习总结——HTML5入门与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...

  7. HTML5不允许写结束标记的元素

    HTML5不允许写结束标记的元素 1.area 2.base 3.br 4.col 5.command 6.embed 7.img 8.hr 9.keygen 10.link 11.meta 12.p ...

  8. HTML5中重新定义的 b 和 i 元素

    HTML5强调元素的语义,而非表现.b和i元素是早期HTML遗留下来的产物,它们分别用于将文本变为粗体和斜体(那时CSS还未出现). 当时的规范建议编码人员用strong替代b,用em替代i.不过,事 ...

  9. Java SE 19 新增特性

    Java SE 19 新增特性 作者:Grey 原文地址: 博客园:Java SE 19 新增特性 CSDN:Java SE 19 新增特性 源码 源仓库: Github:java_new_featu ...

随机推荐

  1. 邁向IT專家成功之路的三十則鐵律 鐵律二十五：IT人屈辱之道-十倍奉還

    現代人普遍火氣都很大,與人爭論時只要有一點點感到屈辱,便會開始大聲反擊,甚至於暴力相向.至於企業中的人事相鬥,則是典型的來個明爭暗鬥,直到成為老闆眼中的紅人,在逐漸掌握了權力之後再來個內部大清洗,不久 ...

  2. 3.【nuxt起步】-下面以一个SPA单页程序为例子

    spa:single page applcation 1.components目录新建header.vue,footer.vue Header.vue Footer.vue Pages/index.v ...

  3. 使用cacheBuilder实现函数防抖

    在接口中出现的相同请求重复且连续发送的情况导致一些业务BUG,需要在接口上实现防抖 使用google的cacheBuilder import com.google.common.cache.Cache ...

  4. Codeforces Beta Round #1 A. Theatre Square

    从今天開始.就要在Codeforces里有一个新的開始了,貌似任务非常重的说~~ Codeforces专题我将会记录全部通过的题目,事实上仅仅要通过的题目都是水题啊!. 题目大意: 依照要求计算须要多 ...

  5. vue2.0 vue-router

    一.SPA中路由的简单实现 main.js import Vue from 'vue' import App from './App' import VueRouter from 'vue-route ...

  6. Irrlicht 3D Engine 笔记系列之 教程4 - Movement

    作者: i_dovelemon 日期: 2014 / 12 / 16 来源: CSDN 主题: Event Receiver, Animator, Framerate independent move ...

  7. html嵌套规则

    本人半路出家的  今天学习js的时候写了一个a嵌套a标签结果js报错 一直找不到原因 专门找了一下html嵌套规则看了一下 1.块级元素 一般用来搭建网站架构.布局.承载内容……它包括以下这些标签: ...

  8. 微博达人硅谷之歌：Testin云測移动搜索性能測试非常是让人信服

    微博达人硅谷之歌:Testin云測移动搜索性能測试非常是让人信服 2014/10/08 · Testin · 开发人员訪谈 2013年11月1日,谷歌运行董事长施密特(Eric Emerson Sch ...

  9. css实现轮播效果图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 关于mongorc.js文件详解

    最近阅读了<<mongodb权威指南第二版>>,发现这本书比之前的第一版好,很多地方讲解很详细.下面就翻译下谈下这个文件. 首先,启动shell的时候,mongorc.js文件 ...