图片分类整理需依靠目录结构、data-category属性或构建/服务端处理，HTML仅负责展示；路径语义化（如/products/）便于脚本筛选，data-category适用于动态内容，避免依赖alt、文件名或class。
HTML 本身不提供图片资源管理或分类整理能力——它只是展示图片的媒介。真正要实现“分类整理”，得靠文件系统结构、命名规范、构建工具或后端逻辑配合，HTML 只负责按需引用。
图片分类必须靠目录结构 + 语义化路径
浏览器加载 <img> 时只认 URL（本地是相对/绝对路径），不会自动识别“类别”。所以第一步是人为建立可预测的目录层级：
-
./assets/images/products/phone.jpg→ “products” 是分类标识 -
./assets/images/icons/close.svg→ “icons” 表明用途和尺寸特征 - 避免扁平堆放：
./images/001.jpg、./images/002.jpg—— 后期无法区分类型，也无法批量处理
路径中的分类名会直接反映在 src 属性里，后续用脚本遍历 document.querySelectorAll('img[src*="products"]') 就能筛选出该类图片。
用 data-category 做运行时分类标记
如果图片来源动态（比如 CMS 返回的 JSON），且目录结构无法体现业务分类，就别硬靠路径，改用自定义属性：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<img src="avatar-723.png" data-category="user" data-priority="high"> <img src="chart-q3.svg" data-category="report" data-priority="low">
这样 JavaScript 就能统一操作：
-
document.querySelectorAll('img[data-category="user"]')拿到所有用户头像 - 配合
IntersectionObserver，只对data-priority="high"的图做懒加载 - 导出为 JSON 时，
data-category可直接映射为字段，无需解析文件名
不要依赖 alt 或文件名做分类依据
alt 是无障碍描述，不是元数据；文件名可能被压缩工具重写（如 Webpack 的 [hash].jpg）。常见翻车点：
- 写脚本匹配
img.alt.includes('logo')→ 中文 alt、空格、大小写不一致就失效 - 用
src.split('/').pop().includes('banner')→ 构建后变成banner.a1b2c3.jpg，原始语义丢失 - 把分类逻辑塞进 CSS class（如
class="img-product"）→ 与样式职责混杂，难以维护
真正需要自动化分类时，应该在构建阶段（如 Vite 插件）或服务端（如 Node.js 读取目录生成索引）完成，而不是 runtime 硬解析 HTML。
分类整理的关键不在 HTML 标签怎么写，而在于你是否让路径、属性、构建流程三者保持一致——一旦脱节，任何“自动归类”都会变成临时补丁。
