progress标签需同时设置数值型value和max属性才能显示真实进度，仅设value或传字符串会导致条纹动画；须清除默认样式、防超限、处理IE降级并注意布局对齐。
progress 标签不是“写进去就动”的控件，它只渲染数值——必须同时设 value 和 max，且两者都得是数字，否则多数浏览器会显示不确定进度（条纹动画），而非真实进度。
为什么progress不显示进度？常见原因和修复
最常踩的坑是只写 value 没写 max，或把数字当字符串传。浏览器默认 max="1"，所以 value="75" 实际是 75 ÷ 1 = 7500%，直接满格。
-
max必须显式声明，推荐统一用max="100"，便于后端/JS 返回整数百分比 -
value和max的值必须是数字类型：JS 中用el.value = Number(val)，别用setAttribute('value', val) - HTML 里写死时，别加单位或引号干扰：
<progress value="82" max="100"></progress>合法；value="82%"或value="0.82"（没设max="1"）则无效
在表单里嵌入progress要防样式错位
progress 是替换元素，默认带 margin 和 baseline 对齐行为，直接塞进 <td> 或 <div class="form-group"> 容易撑高行高、左右留白、上下偏移。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 加内联样式强制归零：
style="margin: 0; vertical-align: middle;" - 显式设宽度，比如
width: 150px，避免窄容器下被压缩变形 - 居中不用父元素
text-align，而用display: inline-block+ 父级text-align: center
动态更新必须靠 JavaScript，且不能只改 HTML 属性
上传、计算、分步表单等场景，progress 不会自动感知状态变化。你得监听事件（如 XMLHttpRequest.upload.onprogress），再手动更新 value。
立即学习“前端免费学习笔记（深入）”；
- 更新时直接赋值：
prog.value = Math.min(loaded / total * 100, 100)，不是prog.setAttribute('value', ...) - 务必做防超限处理——网络抖动可能导致
loaded > total，造成value > max，部分浏览器会清空渲染或回跳 - IE 完全不支持
progress，降级方案只能用<div class="progress-bar"><div class="progress-fill" style="width: 75%;"></div></div>配合 JS 同步更新style.width
真正容易被忽略的是：哪怕所有属性都写对了，如果没清除浏览器默认样式（appearance: none），Chrome/Firefox 的配色、圆角、高度就无法统一控制；而伪元素写法又因引擎不同必须分开处理——这不是可选项，是跨浏览器可用的前提。
