HTML无原生等级控件，需用配合文字容器实现；value/max须为纯数字，字符串或非法值将导致静默失败；CSS定制需区分内核伪元素，移动端支持有限；等级计算必须由JS完成，阈值应存数组动态映射。
HTML里没有原生的“等级”或“积分”控件，得自己组合
浏览器不认 level 或 exp 这种语义标签，<progress></progress> 只管数值进度，不带文字、不自动换算等级。想显示“Lv.12（3420/5000）”，必须用普通元素拼：一个容器包住文字 + <progress></progress> + 可能的图标。
用 <progress></progress> 显示进度时，value 和 max 必须是数字，且 value ≤ max
常见报错是 NaN 或进度条卡在 0%，根源往往是传了字符串或未定义值。比如 JS 动态赋值时写了 progress.value = "3420"，或者没初始化 max 属性。
-
value和max都得是纯数字，不能带单位或逗号 - 如果积分是 3,420，JS 里要先
parseInt("3,420".replace(/,/g, "")) -
<progress value="3420" max="5000"></progress>才有效；写成value="3420px"或max="5k"会静默失败 - Chrome/Firefox 对非法值容忍度不同——Firefox 更可能直接不渲染进度条
CSS 控制 <progress></progress> 样式时，伪元素名容易写错
想改颜色、高度、圆角？必须用 ::-webkit-progress-bar 和 ::-webkit-progress-value（Chrome/Safari），Firefox 用 ::progress-bar 和 ::progress-value，但实际支持有限。别指望用 ::before 去盖一层——它不生效。
- WebKit 内核下，
progress::-webkit-progress-bar控制背景，progress::-webkit-progress-value控制已填充部分 - Firefox 目前只支持全局
accent-color改主色，自定义填充色需用background: linear-gradient()覆盖::-webkit-progress-value - 不要给
<progress></progress>设height，它默认是 20px，改高了会拉伸变形；应改appearance: none后再调内部伪元素 - 移动端 Safari 对
progress的 CSS 支持更弱，简单配色比复杂动画更稳妥
把积分转成等级，逻辑必须在 JS 里做，HTML 不参与计算
等级不是线性增长，比如 Lv.1→2 要 100 分，Lv.11→12 要 800 分。这个映射表不能塞进 HTML 属性里，否则无法动态响应数据变化，也难维护。
立即学习“前端免费学习笔记（深入）”；
- 等级阈值建议存在数组里：
const levelUp = [0, 100, 300, 600, 1000, 1500, 2100, 2800, 3600, 4500, 5500] - JS 里用
levelUp.findIndex(thresh => exp 算当前等级，别手写 if-else 十层嵌套 - 更新时同时改两个地方：
progress.value和等级文字节点，避免视觉错位 - 如果后端返回的是
{"level": 12, "current_exp": 3420, "next_level_exp": 5000}，就别再自己算——直接用，减少出错点
最常被忽略的是：进度条的语义化意义。屏幕阅读器会读出“progress bar 68 percent”，但不会告诉你这是“经验值”。加 aria-label="经验值：3420 / 5000" 才算真正可用。另外，别为了省事用 <div> 模拟进度条——失去原生可访问性和键盘支持。</div>
