HTML 无法自动显示文件类型图标，必须通过 JavaScript 判断扩展名并动态添加图标 class 或 URL，或由后端解析 Content-Type/路径后缀注入图标标识；推荐用 CSS class 驱动图标（如 icon-pdf），配合大小写归一化、完整后缀匹配（如 .tar.gz 优先于 .gz）、未知类型 fallback 至通用图标，并注意深色模式适配与加载性能优化。
怎么用 HTML 显示文件类型图标
直接靠 HTML 本身做不到。HTML 没有内置机制根据 .pdf、.xlsx 这类扩展名自动选图标——它只是结构标记语言，不处理文件类型映射逻辑。
真正可行的路只有一条：前端用 JavaScript 判断扩展名，再匹配对应图标 class 或 URL；后端更稳妥，由服务端解析 Content-Type 或路径后缀，注入图标标识。
常见错误是试图只写 <img src="icon-${ext}.png"> 却没做大小写归一化或非法扩展名兜底，结果 .PDF、.XLSX 全挂空。
- 扩展名提取必须用
filename.split('.').pop().toLowerCase()，不能只靠substring或正则硬切 - 优先匹配完整后缀：比如
.tar.gz要比.gz优先级高，否则archive.tar.gz会错标成 gzip 图标 - 务必 fallback 到通用文档图标（如
file-text），别让未知后缀渲染成空白或报错
用 CSS class 控制图标显示最轻量
比起每次动态拼 <img> 标签，用 class 驱动图标（例如 Font Awesome、Iconify 或自定义 icon font）更快、更可控，也避免大量 HTTP 请求。
立即学习“前端免费学习笔记（深入）”；
关键在 class 命名要可预测：icon-pdf、icon-docx、icon-folder，然后用 JS 动态加 class：
element.classList.add(`icon-${ext}`);
容易踩的坑：
- 没提前在 CSS 里定义所有可能的
.icon-xxx，导致 class 加上了但没效果 - 用了 SVG sprite 但没处理
<use href="#icon-pdf">的跨域或缓存问题 - 把图标 class 写死在 HTML 模板里，而不是运行时注入，失去灵活性
Node.js 后端生成图标 class 更可靠
如果页面是 SSR 渲染（如 Express + EJS），让后端决定图标更稳：它能真实读取文件系统或数据库中的 originalName，也能结合 mime.getType() 做双重校验。
示例中 Express 路由传参：
res.render('list', { files: files.map(f => ({<br> name: f.name,<br> iconClass: getIconClass(f.name), // ← 这个函数在服务端跑<br>})) });
getIconClass() 可基于 path.extname() + mime.getExtension() 组合判断，比前端纯靠字符串更抗伪造。
- 注意 Windows 上传可能带双扩展名（如
report.pdf.exe），得用mime.getType()为主、后缀为辅 - 别在模板里写
icon-${file.name.split('.').pop()}—— 这种写法后端根本没做安全过滤，容易 XSS - 图标映射表建议抽成 JSON 文件或 Map 结构，方便增删类型，别硬编码在函数里
移动端和低配设备的图标加载陷阱
图标不是装饰，是信息载体。在弱网或低端 Android 上，一堆 <img src="icon-xxx.png"> 并发加载可能卡住首屏，甚至触发浏览器资源限流。
解决方案不是“多加 loading”，而是从源头控制请求数：
- 所有图标用单张雪碧图（sprite）+
background-position，或改用 inline SVG 字符串 - 对非首屏文件项（如分页后的列表）延迟绑定图标 class，用 IntersectionObserver 触发
- 禁用
loading="lazy"在图标上——它对小图标意义不大，反而增加 JS 判断开销
最容易被忽略的是：图标颜色没适配深色模式。用 currentColor 或 CSS 变量控制 fill/stroke，别写死 #333。
