标签用于在html中插入图像，必需属性为src（指定图像url）和alt（提供替代文本），其他常用属性包括width、height、title、border等，且为自闭合标签。
列表项里直接放 <img> 就能显示图片，但容易错在路径、语义、对齐和响应式四个地方。
列表中直接用 <img> 标签
最常用也最稳妥的方式：把 <img> 当作普通内联内容放进 <li> 里。它不破坏列表结构，语义清晰，屏幕阅读器也能正确识别图片内容。
-
src必须是有效路径——相对路径以 HTML 文件为基准，比如图片在同级images/目录下，就写src="images/icon-home.png" -
alt不可为空，尤其是图标类图片，应描述功能而非“首页图标”，例如alt="返回首页" - 避免用
align属性（已废弃），改用 CSS 的vertical-align或display: flex对齐图文 - 如果列表项有悬停效果或点击行为，别把
<img>单独包<a></a>，而应让整个<li>可交互，再用 CSS 控制样式
background-image 做列表前缀图标
当图片只是装饰性前缀（比如圆点、箭头、小图标），且不需要被读屏软件读出时，用 CSS background-image 更轻量、更可控。
- 给
<li>设置padding-left，再用background-image: url(...)+background-position: left center定位 - 必须配
background-repeat: no-repeat，否则图标会横向重复 - 注意路径问题：CSS 中的 URL 是相对于样式表文件位置的，不是 HTML 文件——若用内联
style，则按 HTML 文件位置解析 - 无法设置
alt文本，所以纯装饰才用；若图标承载操作含义（如“删除”“编辑”），仍得用<img>+ 合理alt
<figure></figure> 包裹图片+说明的场景
只有当列表项里的图片本身是独立内容（比如产品图配简短说明、数据截图、带标题的示意图），才考虑用 <figure></figure> 提升语义。
-
<figure></figure>必须包含<img>和<figcaption></figcaption>，且<figcaption></figcaption>是其子元素之一 - 不要为了“看起来整齐”而强行套
<figure></figure>，它会增加 DOM 深度，对简单图标毫无必要 - 配合 CSS 时注意
<figure></figure>默认是块级，可能撑开行高，需重置margin或设display: inline-flex - 移动端缩放时，
<figure></figure>内部尺寸控制比纯<img>更复杂，优先保证max-width: 100%和height: auto
响应式与加载性能容易被忽略的点
列表常出现在导航栏、侧边栏或卡片流中，图片尺寸和加载时机直接影响首屏体验。
- 别只靠 CSS 缩放（如
width: 24px）去压一张 500px 宽的 PNG——用户手机上仍在下载大图 - 小图标类图片优先用 SVG（内联或
src引入），天然矢量、体积小、可继承颜色 - 非首屏列表项（如下拉菜单、分页后的项目）加
loading="lazy"，但注意 Safari 旧版不支持，需降级处理 -
srcset对列表图标意义不大，除非是不同 DPR 下需精细控制的 banner 图；普通 icon 用单图 + SVG 更实际
真正麻烦的从来不是“怎么放进去”，而是“放进去之后是否还在正确路径、是否被读屏器理解、是否在手机上不失真、是否拖慢滚动”。每张图在列表里出现一次，就得重新确认这四件事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
