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>
