如何使用HTML中的Progress标签构建进度条-html教程-PHP中文网

需同时设置max和value才显示确定进度，仅设其一或值类型错误将导致空白或无效；动态更新须用javascript直接赋值elem.value，css自定义需兼容各浏览器伪元素，且须保障可访问性。

如何使用html中的progress标签构建进度条

<progress></progress> 标签本身就能渲染出原生进度条，但直接写 <progress></progress> 不会显示任何进度——它默认 value 未设置，浏览器视为“不确定状态”，多数渲染为空白或动画占位符。

为什么写了却看不到进度？

核心原因是：必须同时指定 max 和 value 才能显示确定进度。只设 value 不设 max，浏览器按默认 max="100" 处理，但部分旧版 Safari 或某些 UA 可能不兼容；只设 max 不设 value 则始终为 0%。

<progress value="65" max="100"></progress> → 正常显示 65%
<progress value="0.65"></progress> → 无效：value 必须是数字，且与 max 同量纲（不能混用小数和整数）
<progress max="200"></progress> → 无 value，显示空白或 indeterminate 动画（取决于浏览器）

如何动态更新的值？

不能靠 HTML 属性绑定，得用 JavaScript 操作 value 属性。注意：修改的是 DOM 属性（elem.value = 72），不是 HTML 特性（setAttribute('value', '72')）——后者在部分浏览器中不会触发视觉更新。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

正确方式：document.querySelector('progress').value = 88
错误方式：elem.setAttribute('value', '88')（可能不重绘）
更新时无需重新设置 max，只要 value ≤ max 即可；超出时浏览器会截断为 max
若需动画效果，CSS 本身不支持 <progress></progress> 的 transition，得用 JS + requestAnimationFrame 逐帧更新

怎么用 CSS 自定义样式？

各浏览器使用不同伪元素暴露内部结构，必须分别处理。Chrome/Edge 用 ::-webkit-progress-bar 和 ::-webkit-progress-value；Firefox 用 ::progress-bar 和 ::progress-value；Safari 15.4+ 才支持标准伪类，旧版仅部分支持 -webkit- 前缀。

基础重置：progress { appearance: none; }（移除默认样式，但 Firefox 需额外 -moz-appearance: none）
Chrome 样式关键：progress::-webkit-progress-bar { background: #eee; }，progress::-webkit-progress-value { background: #4caf50; border-radius: 4px; }
Firefox 关键：progress::-moz-progress-bar { background: #4caf50; }（注意它没有独立的 bar 容器，整个条即 bar）
不要依赖 width 控制进度——那是由 value/max 决定的，CSS 只控制外观

真正容易被忽略的是语义与可访问性：<progress></progress> 自带 ARIA role="progressbar" 和自动计算的 aria-valuenow，但如果你用 JS 动态更新 value，务必同步更新 aria-label 或配合 <span aria-live="polite"></span> 提供文字反馈，否则屏幕阅读器可能读不出变化。