最快实现技能条用<progress>标签，现代浏览器原生支持且语义清晰，但IE全系不兼容；需兼容IE时应降级为<div>+ARIA属性，并手动处理可访问性与键盘支持。
用 <progress> 最快实现技能条，但注意浏览器兼容性
现代浏览器直接支持 <progress> 标签，语义清晰、无需 JS 就能展示百分比进度。但它在 IE 全系（包括 IE11）中完全不渲染，只显示空白或 fallback 文本。
实操建议：
- 若项目明确不支持 IE，直接写
<progress value="65" max="100"></progress>，配合 CSS 调色即可 - 若需兼容 IE，必须降级为
<div>+ 内联宽度控制，<progress>仅作语义层存在（可加role="progressbar"提升可访问性） -
value必须是数字，且不能小于 0 或大于max，否则会触发无效状态（部分浏览器显示空条）
CSS 控制技能条外观：宽度、颜色、圆角缺一不可
默认的 <progress> 样式极简，各浏览器渲染差异大（比如 Chrome 的轨道是灰色细线，Firefox 更粗）。想统一效果，必须重置伪元素。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 用
progress::-webkit-progress-bar和progress::-moz-progress-bar分别控制轨道和填充色 - 填充条宽度由
value和max自动计算，**不要**用width手动设 —— 否则破坏语义与可访问性 - 圆角推荐统一设
border-radius: 8px，但需同时作用于轨道和填充伪元素，否则边缘错位 - 移动端要注意最小高度：
height: 12px是底线，再小会导致触摸区域过窄
动态更新技能值？别直接改 value 属性，用 JS 操作更稳
直接在 HTML 里写死 value="72" 只适合静态展示。一旦要响应用户操作或数据变化，就得靠 JS 更新。
正确做法：
- 获取元素后，用
el.value = 85（赋值数字），不是el.setAttribute('value', '85')—— 后者可能不触发 UI 重绘 - 更新前建议校验范围：
value = Math.max(0, Math.min(100, newValue))，避免负数或超 100 导致异常 - 如需动画效果（如缓慢增长），不能靠 CSS transition 动
value（不生效），得用requestAnimationFrame逐帧修改value - 若技能数据来自 API，记得在
progress上加aria-valuenow和aria-valuemin/aria-valuemax，方便读屏软件识别
替代方案：纯 <div> 实现最可控，但得自己管语义和键盘支持
当需要精确控制动画曲线、多段色块（比如“精通”用绿色、“熟练”用橙色）、或嵌入图标时，<progress> 就力不从心了。
这时用两个嵌套 <div> 是最轻量可靠的方案：
<div class="skill-bar" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"> <div class="skill-fill" style="width: 68%;"></div> </div>
要点：
- 外层
div加role="progressbar"和 ARIA 属性，补全可访问性 - 内层
div用style="width"或 CSS 变量控制长度，方便 JS 更新 - 键盘支持需手动添加：
tabindex="0"+ 监听keydown（如方向键微调），否则无法被键盘用户聚焦 - 多段色块只需多个内层
div并排，用flex布局 + 百分比宽度分配
