用原生HTML+CSS实现技术栈徽章区：以语义化包裹技术名，display: inline-flex + gap布局，字体0.85em/行高1.6，适配PDF导出与屏幕阅读器；禁用SVG链接和JS，优先本地化或校验shields.io URL。
怎么用纯 HTML + CSS 实现可维护的技术栈徽章区
直接用 <img alt="HTML怎么创建技术栈展示区_HTML tech stack badges教程【简历】" > 嵌入第三方徽章（比如 shields.io）最省事，但简历 PDF 导出时经常失效、加载慢、尺寸错乱——真正靠谱的做法是用原生 HTML 写一组带语义的 <span></span> 或 <code> 标签，再配轻量 CSS 控制样式。
关键不是“好看”，而是：PDF 转换稳定、屏幕阅读器可读、改一个技术名不牵连样式、打印时不溢出页面。
- 别用 SVG 链接或 JS 动态生成——简历要离线可用，且 ATS（招聘系统）可能只解析静态 HTML
- 每个技术名用
<code>包裹，既符合语义（代码/技术名词），又自带等宽字体和默认边距 - 用
display: inline-flex+gap排列徽章，比浮动或 inline-block 更可控，兼容现代 PDF 工具（如 wkhtmltopdf、WeasyPrint） - 字体大小设为
0.85em，避免在窄屏简历里换行；行高1.6防文字贴边
shields.io 徽章链接怎么填才不翻车
很多人复制 shields.io 的 Markdown 链接就完事，结果简历里显示 404 或空白——根本原因是路径没转义、参数含特殊字符、HTTPS 混合内容被拦截。
正确做法：只取 https://img.shields.io/badge/ 开头的真实 URL，手动校验三件事：
立即学习“前端免费学习笔记（深入）”；
- 技术名和版本号里的空格必须换成
-（React%2018→React-18），否则返回 400 - 颜色名必须是 shields 支持的固定值，比如
informational、success、blue，写skyblue会回退成灰色 - 如果简历要导出 PDF，优先选
flat样式（?style=flat），social或for-the-badge在部分工具里渲染异常 - 备用方案：把徽章图下载下来，放本地
/assets/badges/目录，用相对路径引用，彻底规避网络问题
响应式断行导致徽章堆成一团怎么办
技术栈一多，小屏下徽章挤成一行拉出横向滚动条，或者全挤到第二行只剩一个——这不是 CSS 写得丑，是没设断点逻辑。
解决思路不是“让它永远单行”，而是分层控制换行节奏：
- 给徽章容器加
flex-wrap: wrap，允许折行 - 每个
<code>徽章设flex: 0 0 auto，禁止被压缩变形 - 用
@media (max-width: 768px)把字体缩到0.75em，同时gap减半，保住密度 - 极端窄屏（比如手机简历预览）加一条：
white-space: nowrap在<code>上，防止“TypeScript”被拆成两行
为什么不用现成的 badge 库（比如 simple-icons）
simple-icons 确实图标全，但它的 SVG 是通过 <use href="..."></use> 引用 sprite，依赖完整 DOM 加载和同源策略——嵌入简历 HTML 后，PDF 工具常无法解析外部 symbol 引用，图标变空白方块。
更实际的问题是体积和耦合：
- 引入整个
simple-iconsJS 包，简历 HTML 文件瞬间涨 200KB+，而你只用其中 5 个图标 - 图标颜色靠 CSS
fill控制，但很多 PDF 渲染器不支持内联 SVG 的 fill 继承（尤其深色背景时） - 不如直接用
<svg></svg>内联写 3–5 行代码，每个图标自己控制fill和width，改颜色、调大小一目了然 - 示例：React 图标只需 1 个
<path></path>，不到 200 字符，复制粘贴比 npm install 快得多
技术栈展示的本质是信息传达，不是 UI 秀技。能用 10 行 HTML/CSS 说清的事，别让构建流程、CDN 依赖和 SVG 兼容性来背锅。
