1. HTML进度条基础
1.1 progress标签的语义与结构
在HTML5中，progress标签提供了一个原生的进度条控件，用于直观地表示任务完成的程度。它的语义是一个独立的可视化指示，通常与任务进度、下载、安装等场景绑定。通过将value与max属性结合，可以精准显示比例。语义化的控件有助于屏幕阅读器正确解读当前状态，提升无障碍体验。
要理解其结构，核心点在于：progress元素本身即为容器，value表示当前进度，max表示总量。若省略value，浏览器会呈现一个不确定状态的动画进度条，通常用于等待或任务尚未开始的场景。此设计让代码语义清晰且易于样式化。
<progress value="40" max="100"></progress>1.2 结构用法与示例
标准用法的进度条只需要两个关键属性：value与max，页面加载或任务阶段的状态变化即可通过JS动态修改value来体现。
如果需要展示一个占位占比但尚未开始的场景，可以省略value属性，此时进度条进入indeterminate状态，通常用于等待过程。
<progress value="70" max="100"></progress>
<progress></progress>
