HTML progress 语法
在 HTML 中，progress 标签以进度条的形式来显示某一个任务的完成度，如上传文件、下载文件等。
语法：
<progress max="最大值" value="当前值"></progress>说明：
max 属性表示最大值，value 属性表示当前值。对于 progress 元素来说，它只有 max 属性，但是没有 min 属性。为什么呢？原因很简单，所有进度条的最小值都是 0，因此 progress 元素默认最小值也是 0。
此外，max 和 value 必须是 0 或正数，并且 max 值必须大于等于 value 值。小伙伴们想象一下进度条的特点就很容易理解了。
注意: 如果 value 属性的值大于 max 属性的值，则 progress 标签将显示为超出了最大进度范围。
HTML progress 摘要
| 属于 | HTML 标签 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML progress 示例
接下来，我们通过几个简单的例子来讲解一下 HTML progress 标签是如何使用的。
示例 1：progress 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<progress max="10" value="8"></progress><br>
<progress max="100" value="80"></progress>
</body>
</html>页面效果如下图所示。
分析：
“进度 = value / max”，因此虽然两个 progress 元素的 max 和 value 不一致，但是进度是相同的，都是 80%。
示例 2：使用 JavaScript 控制 progress 的进度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
<progress max="100" value="0"></progress>
<span>0</span>%
</p>
<button type="button">显示进度</button>
<script>
// 获取元素
const oProgress = document.getElementsByTagName("progress")[0];
const oSpan = document.getElementsByTagName("span")[0];
const oBtn = document.getElementsByTagName("button")[0];
// 点击事件
oBtn.addEventListener("click", function() {
const i = 0;
// 清除可能已存在的定时器，防止多次点击导致速度叠加
const timer = setInterval(function() {
if ( i < 100 ) {
i++;
oProgress.value = i;
oSpan.innerText = i;
} else {
// 当进度达到 100 时，清除定时器以释放资源
clearInterval(timer);
}
}, 100);
});
</script>
</body>
</html>默认情况下，页面效果如下图 1 所示。当单击【显示进度】按钮后，页面效果如下图 2 所示。
分析：
在这个例子中，我们使用定时器 setInterval() 函数来实现进度条的不断增加。progress 默认样式是比较简陋的，在实际项目开发中很少会直接使用它来开发进度条，而更多是使用 UI 框架自带的进度条。
progress 与 meter 的区别
progress 跟 meter 这两个标签非常相似，都是以进度条形式来显示数据比例。不过两者在语义上有很大的区别。
progress：一般用于显示动态数据比例。所谓动态数据，指的是会不断改变的数据，例如下载文件的进度。meter：一般用于显示静态数据比例。所谓的静态数据，指的是很少改变的数据，例如男生人数占全班人数的比例。
