1、<progress>進度條
定義進度信息使用的是?progress?標簽。它表示一個任務的完成進度，這個進度可以是不確定的，只是表示進度正在進行，但是不清楚還有多少工作量沒有完成，也可以用0到某個最大數字（如：100）之間的數字來表示準確的完成情況（如：進度百分比）。
?progress 標簽的屬性：
| 屬性 | 說明 |
|---|---|
| value | 表示已經完成了多少工作量 |
| max | 表示總共有多少工作量 |
【實例】在網頁中使用?progress 標簽添加進度條。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="author" content="pan_junbiao的博客"><title>使用進度條</title><script type="text/javascript">function button_onclick() {for (var i = 0; i <= 100; i++)updateProgress(i);}function updateProgress(newValue) {var progressBar = document.getElementById('p');progressBar.value = newValue;document.getElementsByTagName('span')[0].textContent = newValue;}</script>
</head><body><section><h2>progress元素的使用實例</h2><p>完成百分比: <progress id="p" max=100></progress><span>0</span>%</p><input type="button" onClick="button_onclick()" value="請點擊" /></section>
</body></html>執行結果：
?
2、<meter>刻度條
定義刻度信息使用的是 meter?標簽，該標簽用來表示規定范圍內的數量值，如磁盤使用量比例、關鍵詞匹配程度等。
需要注意的是，meter?標簽不可以用來表示那些沒有已知范圍的任意值，例如：重量、高度，除非已經設定了這些值的范圍。
meter 標簽的屬性：
| 屬性 | 說明 |
|---|---|
| value | 當前標量的實際值 |
| min | 當前標量的最小值 |
| max | 當前標量的最大值 |
| low | 當前標量的低值區 |
| high | 當前標量的高值區 |
| optimum | 最佳值，其范圍在最小值與最大值區間當中 |
【實例】在網頁中使用?meter?標簽添加刻度條。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="author" content="pan_junbiao的博客"><title>使用刻度條</title>
</head>
<body><p>磁盤使用量：<meter value="50" min="0" max="160">50/160</meter> GB</p><p>你的得分是：<meter value="91" min="0" max="100" low="10" high="90" optimum="100"></meter> A+</p>
</body>
</html>執行結果：
