html5中progress/meter元素
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元素的更多相关文章
- html5--3.19 新增的progress/meter元素
html5--3.19 新增的progress/meter元素 学习要点 了解progress/meter元素的用法 progress元素 是HTML5中新增的元素,用来建立一个进度条 通常与Java ...
- 第一章 用HTML5中的结构元素构建网站
1.当一个容器需要直接定义样式或通过脚本定义行为时,推荐使用div元素而非section元素. 2.section是需要标题的,而nav或aside没有标题也是可以的. 3.html5轮廓工具 htt ...
- 详解HTML5中的<aside>元素与<article>元素
<aside>元素HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在.<aside>元素通常显示成 ...
- HTML5 中的Nav元素详解
什么是Nav元素 Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在nav元素里面,我们只需要把最主要 ...
- Html5中的video元素
最近在做门户的时候遇到要显示企业的视频介绍,需要找到一个在aspx页面播放视频的html,最后找到了是一段HTML5最新的html代码,如下: /// <summary> /// 播放视频 ...
- html5中新增的元素和废除的元素
一.新增的结构元素 1.section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分.它可以与h1.h2.h3.h4.h5.h6等元素结合起来使用,标示文档结构. h5中的代码事 ...
- HTML5 中的meter 标签的样式设置
meter { -webkit-appearance: none; position: relative; display: block; margin: 8px auto; width: 100px ...
- 笔记:HTML5中input元素新增的type值
在HTML5中,input元素的type值增加了不少,使input的功能强大了很多. 但在各大浏览器中并不是所有的type值都支持. 以下是比较有用.并且浏览器支持的稍好一些的值: type=colo ...
- html5中的fieldset/legend元素和keygen元素
html5中的fieldset/legend元素和keygen元素 一.总结 一句话总结: fieldset/legend元素和figure和figcaption很像,只不过是作用于表单,前者表示内容 ...
随机推荐
- kubernetes集群的认证、授权、准入控制
一.kubernetes集群安全架构 用户使用kubectl.客户机或通过REST请求访问API.可以授权用户和Kubernetes服务帐户进行API访问.当一个请求到达API时,它会经历几个阶段,如 ...
- Linux在丢失的情况下重置密码
1.开机菜单是 移动光标到第一行 --敲击e 2.找到UTF-8,加上空格rd.break,敲击ctrl+x 3.输入以下命令 mount -o remount,rw /sysroot chroot ...
- 调试freeradius 3.0 与microsoft AD通过LDAP认证的笔记
首先来参考文章: a.https://blog.51cto.com/liqingbiao/2146832?utm_source=oschina-app 这个主要参考了基本安装.配置.测试 b.http ...
- java安全相关知识
基本概念 JVM:java虚拟机,Java编译程序将生成Java虚拟机上可运行的目标代码,使得Java程序可以再不同平台不加修改的运行.JVM包含完善的硬件架构,主要分为五大模块-类装载器子系统.运行 ...
- ubuntu---对比工具Meld
Beyond Compare是商业软件,下载地址:http://www.scootersoftware.com/download.php.下载完直接运行或者通过dpkg安装即可. 其实Linux下文本 ...
- Java精通并发-多线程同步关系实例剖析与详解
在上一次https://www.cnblogs.com/webor2006/p/11422587.html中通过实践来解了一个案例,先来回顾一下习题: 编写一个多线程程序,实现这样的一个目标: 1.存 ...
- tcp的三次握手和四次挥手转自https://www.jianshu.com/p/d3725391af59
三次握手(three-way handshaking) 1.背景:TCP位于传输层,作用是提供可靠的字节流服务,为了准确无误地将数据送达目的地,TCP协议采纳三次握手策略. 2.原理: 1)发送端首先 ...
- VS调试web api服务
vs2013开发web api service时,使用vs开发服务器调试没有问题,但将项目放到另一台电脑调试(vs2010),总会提示 无法再以下端口启动asp.net开发服务器 错误:通常每个套接字 ...
- 完美字符子串 单调队列预处理+DP线段树优化
题意:有一个长度为n的字符串,每一位只会是p或j.你需要取出一个子串S(注意不是子序列),使得该子串不管是从左往右还是从右往左取,都保证每时每刻已取出的p的个数不小于j的个数.如果你的子串是最长的,那 ...
- 堆优化Prim 最小生成树 模板
#include <bits/stdc++.h> using namespace std; const int MAXN = 5005; const int MAXM = 200005; ...