应使用语义化的<progress>标签并配合CSS统一样式，而非纯div模拟；需禁用appearance、分别处理WebKit和Gecko伪元素，结构上文字与进度条分离，导出PDF时需JS替换为内联width的div。
直接用 <progress> 标签最省事，但别直接塞进简历里就完事——它默认样式丑、语义对但视觉失控，不加 CSS 修饰会显得廉价，甚至在某些浏览器里根本看不出进度。
为什么不用 <progress> 就写死百分比？
因为 <progress> 是语义化标签，屏幕阅读器能识别它代表“可度量的完成状态”，对残障用户和 SEO 都友好；而纯 <div> + 宽度控制只是视觉模拟，没有内在含义。但它的原生样式差异极大：Chrome 和 Safari 的轨道粗细、圆角、颜色完全不同，Firefox 还要靠 ::-moz-progress-bar 单独调，不统一处理就会在不同设备上看起来像两个组件。
常见错误现象：
- 进度条在 Firefox 里完全没颜色（忘了重置
appearance: none） - value 设为
85但 max 是10，结果显示 850%（参数单位错乱） - 把
<progress>放在简历 PDF 导出流程中，值全丢失（PDF 工具不解析动态标签）
怎么用 CSS 统一控制 <progress> 样式？
必须同时覆盖 WebKit 和 Gecko 引擎，且禁用默认外观。关键三步不能少：
立即学习“前端免费学习笔记（深入）”；
- 给
<progress>设置appearance: none，否则伪元素无效 - 用
::-webkit-progress-bar控制背景轨道，::-webkit-progress-value控制填充色 - 用
::-moz-progress-bar单独设 Firefox 填充色（它不支持 value 伪类）
示例最小可用样式：
progress {
appearance: none;
width: 100%;
height: 8px;
}
progress::-webkit-progress-bar { background-color: #e0e0e0; border-radius: 4px; }
progress::-webkit-progress-value { background-color: #4CAF50; border-radius: 4px; }
progress::-moz-progress-bar { background-color: #4CAF50; }
技能项里怎么嵌入并保持语义清晰？
每个技能单独一行，用 <section> 或 <div class="skill-item"> 包裹，<progress> 只负责进度，文字说明另放——不要塞进 <progress> 内部当降级内容，那会影响可访问性读取顺序。
正确结构示例：
<div class="skill-item"> <span class="skill-name">JavaScript</span> <progress value="90" max="100"></progress> <span class="skill-percent">90%</span> </div>
注意点：
-
max固定用100，避免后续维护时单位混淆 - 百分比数字用独立
<span>，方便加动画或响应式隐藏 - 如果简历要导出 PDF，建议用 JS 在生成前把
<progress>替换为等宽<div>+ 内联 style，否则值不会渲染
什么时候该放弃 <progress> 改用手动 <div>？
当你要做这些事时，原生标签反而添麻烦：
- 需要环形进度（比如“React”技能用圆弧展示）
- 进度条带渐变色、阴影或图标点缀（原生伪元素不支持 background-image）
- 要响应鼠标悬停显示详情 tooltip（
<progress>不支持子元素） - 项目构建流程里禁用 JS，又想保证静态 PDF 中进度可见（此时必须用内联宽度）
手动方案核心就一句：<div class="progress-fill" style="width: 85%"></div>，配合容器的 overflow: hidden 即可。它没语义，但可控性拉满。
真正容易被忽略的是：技能进度不是越满越好。前端简历里写 “TypeScript: 100%” 反而降低可信度——面试官第一反应是“谁敢给自己打满分”。留 1–2% 空隙，写成 98% 或 “熟练（非全栈）”，更显真实。
