用正确显示小组任务完成率，需通过data属性存原始数据并用JS动态更新value、文案及状态，避免硬编码或误用；纯HTML无法实现动态更新。
怎么用 <progress></progress> 显示小组任务完成率
原生 <progress></progress> 标签只管数值，不自动算百分比，也不管“谁完成了”——你得自己算好 value 和 max。比如 7 人中 4 人完成，value 填 4，max 填 7，浏览器才渲染出对应长度。
常见错误是把 value 写成百分比（如 60）却没改 max（默认是 100），结果进度条永远卡在 60% 不随人数变；或者直接用 CSS 模拟进度条，反而丢了语义和屏幕阅读器支持。
-
<progress value="4" max="7"></progress>是正确写法，语义清晰、可访问 - 别用
style="width: 60%"硬撑，那样只是视觉假象，aria-valuenow还得手动同步 - 动态更新时，直接改 DOM 的
value属性即可，不用重绘整个元素
HTML 里怎么安全汇总人数并避免硬编码
人数不能写死在 HTML 里，否则每增减一人就得改两处（进度条 + 文字统计）。推荐用 data- 属性存原始数据，再用 JS 读取计算。
比如给容器加 data-total="7" 和 data-done="4"，JS 读出来就能生成进度值、文案、甚至判断是否全完成（done === total）。
立即学习“前端免费学习笔记（深入）”；
- 错误做法：
<p>已完成：4 / 7</p>—— 后期维护成本高，易不同步 - 正确做法：
<div id="task-stats" data-total="7" data-done="4"></div>，JS 渲染所有内容 - 如果完全不想用 JS，只能靠服务端模板（如 PHP/SSR）注入，纯静态 HTML 无法自动汇总
为什么 <meter></meter> 不适合任务完成统计
<meter></meter> 是为“已知范围内的测量值”设计的，比如磁盘使用率、分数段——它需要定义 low、high、optimum。任务完成是离散计数，不是连续度量，强行用 <meter></meter> 反而让语义错乱，且多数屏幕阅读器对它的支持不如 <progress></progress> 稳定。
-
<meter value="4" min="0" max="7"></meter>虽能显示，但语义上它表示“当前值处于某个标尺区间”，不是“任务进展” - Chrome 和 Safari 对
<meter></meter>的样式控制更弱，CSS 伪元素（如::-webkit-meter-bar）兼容性差 - 无障碍测试工具（如 axe）会警告
<meter></meter>用于非度量场景
纯 HTML+CSS 能否实现动态更新
不能。HTML 是静态标记语言，没有变量、循环或条件逻辑。所谓“动态”，必须靠 JS 读取数据、计算比例、更新 value 属性和周边文案。
最容易被忽略的是：即使你用 JS 更新了 <progress></progress> 的 value，如果旁边的文字（如“4/7”）还是手写的，用户看到的就是错位信息。
- 必须用 JS 同时更新
<progress></progress>的value和配套<span class="count"></span>的textContent - 如果后端返回 JSON 数据，建议统一结构：
{ total: 7, done: 4 }，避免字段名不一致（如completedvsfinished） - 小项目可直接内联脚本，但注意不要在 DOM 加载前执行，否则
querySelector找不到元素
真正麻烦的从来不是画一条进度条，而是让数字、状态、语义、可访问性全部对齐——少同步一处，就多一个用户看到错误信息。
