必须用figure仅当图文是可独立引用的语义单元；它不是排版工具，需配直接子元素figcaption，删掉后主文档逻辑仍完整。
直接用 <figure> 包裹每组图文是最清晰、语义最正的做法；但若只是加装饰性小图标，::marker 或 ::before 更轻量可控——别硬套分组标签，否则反而破坏结构。
什么时候该用 <figure> 分组图片和文字
仅当列表项里的图片本身是独立内容（比如产品缩略图+名称+价格），且需要被搜索引擎或读屏软件识别为一个完整信息单元时才适用。它不是用来“整齐排版”的工具。
-
<figure>必须包含<figcaption>，且后者必须是其直接子元素 - 避免嵌套在
<li>里再套一层<div>：这会让 DOM 层级变深，影响可访问性和 CSS 控制精度 - 移动端需加
max-width: 100%和height: auto防止溢出，否则图片可能撑破容器 - 如果所有列表项都用
<figure>，但实际只是小图标+文字，会显著增加 HTML 体积，得不偿失
::marker 和 ::before 哪个更适合图标分组
::marker 是现代浏览器首选，但它只负责列表符号区域；::before 更灵活，能承载交互与响应式行为——选哪个取决于你是否需要 hover 变色、动画或尺寸随屏幕变化。
-
::marker支持content: url()和内联 SVG，图标自动随font-size缩放，color可控制 SVG 填色（前提是 SVG 使用fill="currentColor"） -
::before要先清掉原生符号：li { list-style: none; }，再设position: relative和伪元素定位，文字换行后仍能对齐整行 -
::marker在 Safari 15.4+、Chrome 86+、Firefox 89+ 可用；旧版本必须降级到::before - 别把
::before当作“万能图标容器”：如果图标要响应点击事件，得把事件绑定到<li>上，而不是伪元素本身（它不可聚焦、无法触发click）
为什么 list-style-image 容易失效
写法最简，但路径解析、兼容性和对齐控制全是坑——尤其在多页项目或构建后路径变更时，404 静默发生，很难排查。
立即学习“前端免费学习笔记（深入）”；
- 路径是相对于 CSS 文件位置，不是 HTML 页面，混用
./icons/和icons/极易错位 - 内联 SVG（
url("data:image/svg...")）在旧版 Safari 和 IE 完全不渲染 - 图标大小固定，无法随字体缩放；垂直对齐依赖
line-height和padding-left手动调，稍有不慎就上下偏移 - 若父容器设置了
margin-left: 0，图标可能被直接裁掉，且无任何报错提示
资源路径和加载失败怎么统一管理
图片路径错、404、跨域、CORS 这些问题在分组场景下会被放大——一组里一个挂了，整行视觉就断层。得靠路径规范 + JS 监控双保险。
- 所有图片路径统一用相对路径，从 HTML 文件所在目录起算；禁用混用
images/icon.png和./images/icon.png - 开发阶段运行
Array.from(document.images).filter(i => i.naturalWidth === 0)快速定位加载失败项 - 批量监听错误：
document.querySelectorAll('img').forEach(img => img.addEventListener('error', e => { e.target.src = '/assets/placeholder.svg'; })) - 如果用 Webpack/Vite，建议配置
asset类型自动哈希，避免缓存导致旧路径残留
真正难的不是怎么分组，而是判断“要不要分组”——多数时候，简单 <img> 直接塞进 <li> 就够了；只有当图片承担语义角色（如产品图）、或需要独立交互/状态管理（如可选中图标）时，才值得引入额外结构或 JS 控制。
