1. <progress>标签 进度条
value属性：规定进程的当前值。默认为0
max属性：规定需要完成的值。
PS：这里没有最小值设置，或者说最小值一律为0
<progress max="50" value="20" id="progress"></progress>
小案例：设置定时器，动态增加value值，让进度条动起来
<progress max="100" id="progress"></progress>
<script>
// 这种动态持续访问元素最好不要使用querySelector
var progress = document.getElementById("progress")
// 判断值是数组类型还是字符串
console.log(typeof progress.value) //number
// 设置定时器
var timer = setInterval(function(){
// 因为value是数字类型，可以直接使用加法运算
progress.value++
// 判断进度条是否已满
if(progress.value >= progress.max){
//清除定时器
clearInterval(timer)
}
},50)
</script>
2.<meter>标签：定义度量衡（状态条）
常用属性：min / low / high / max / optinum / value
这个标签主要用来展示当前值在值域区间的情况，比如：磁盘使用情况，查询结果的相关性等。
它有4个值作为参考的临界点，分别是最小值min，较小值low，较大值high，最大值max。这4个值将值域划分成3个区间：[min,low)、[low,high]，(high,max]
而最佳值optinum.默认位于中间的区间[low,high]
<!-- 基本使用 -->
<meter max="100" value="50" min="0" high="80" low="20"></meter>
当前值value的大小除了决定状态条的长度，还会根据它所处的区间，最佳值optinum所在区间来决定颜色。
颜色规则：
我们暂且称optinum属性值所在的区间为"最佳区间","最佳区间"默认在中间，此时从左到右3个区间的颜色分别为 黄-绿-黄。
如果"最佳区间"不在中间，则最佳区间为绿色，离最佳区间稍远的为黄色，最远的为红色。
<body>
<p>最佳区间默认为中间区间</p>
<div>
<meter max="100" value="50" min="0" high="80" low="20"></meter>
</div>
<div>
<meter max="100" value="10" min="0" high="80" low="20"></meter>
</div>
<div>
<meter max="100" value="90" min="0" high="80" low="20"></meter>
</div>
<p>最佳区间设置为左边的区间</p>
<div>
<meter max="100" value="50" min="0" high="80" low="20" optimum="10"></meter>
</div>
<div>
<meter max="100" value="10" min="0" high="80" low="20" optimum="10"></meter>
</div>
<div>
<meter max="100" value="90" min="0" high="80" low="20" optimum="10"></meter>
</div>
<p>最佳区间设置为右边的区间</p>
<div>
<meter max="100" value="50" min="0" high="80" low="20" optimum="90"></meter>
</div>
<div>
<meter max="100" value="10" min="0" high="80" low="20" optimum="90"></meter>
</div>
<div>
<meter max="100" value="90" min="0" high="80" low="20" optimum="90"></meter>
</div>
</body>
