<img>标签是HTML中插入图片的唯一方式，必须包含src和alt属性，路径需准确，响应式需用srcset/sizes，SVG/Base64可内联但需权衡体积与缓存。
用 <img> 标签插入图片是最直接的方式
HTML 里没有“添加图片”的命令或函数，只有 <img> 这个自闭合标签。它不包含内容，只靠属性描述图像来源和行为。
最简可用写法是：<img src="logo.png">。但实际中几乎总要加 alt 属性——不是可选项，而是语义必需项，屏幕阅读器、加载失败时都依赖它。
-
src必须是有效路径（相对或绝对），拼错、大小写不符、路径层级不对都会导致404 Not Found -
alt值要准确描述图的内容或功能，比如按钮图标写“搜索”，数据图表写“2023年用户增长趋势” - 不写
width/height属性时，浏览器按原始尺寸渲染，可能引发布局偏移（CLS）
图片路径写错是 90% 的“图不显示”原因
常见现象：本地双击 HTML 文件打开，图片不显示；但用服务器（如 python -m http.server）跑就正常。本质是 src 路径解析规则没搞清。
- 相对路径以当前 HTML 文件位置为基准，不是以浏览器地址栏为准
-
src="images/icon.jpg"表示同目录下images/文件夹里的文件 -
src="../assets/photo.jpg"中的../是向上退一级目录，不是“回到上一页” - Windows 下路径分隔符用
/，别用\——src="img\cat.jpg"在多数浏览器里会失效
响应式图片要用 srcset 和 sizes，不是只靠 CSS
仅用 width: 100% 或 max-width: 100% 只能缩放，不能换图。真正适配不同屏幕密度和宽度，得靠原生属性。
立即学习“前端免费学习笔记（深入）”；
例如在小屏设备加载小图、大屏加载高清图：
<img
src="photo-small.jpg"
srcset="photo-small.jpg 480w,
photo-medium.jpg 768w,
photo-large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 50vw,
33vw"
alt="活动现场照片">
-
src是兜底图，所有浏览器都认；srcset里的w单位代表图像固有宽度（像素） -
sizes告诉浏览器：“在什么条件下，这张图大概占视口多宽”，影响浏览器选哪张源 - 不要把
srcset当成“高清开关”乱配——如果sizes写成100vw，即使用户在手机上看，也可能加载 1200w 的图
SVG 和 Base64 图片可以直接内联，但要注意体积和缓存
把 SVG 写进 HTML 里（<svg>...</svg>）或把小图标转成 Base64 放进 src，能省一次 HTTP 请求。
- SVG 内联后可被 CSS 控制颜色、大小，比如
fill: currentColor配合文字色自动变色 - Base64 图片写法：
<img src="data:image/svg+xml;base64,PHN2Zy4uLj4=">，但超过 2KB 就明显拖慢 HTML 解析 - 内联图片无法单独缓存，HTML 更新就得重下整个图；常规
src外链图可独立缓存、复用
图一多、尺寸一上去，内联反而更慢。真要优化，优先考虑现代格式（WebP/AVIF）+ 正确的 srcset，而不是硬塞进 HTML。
