<img> 标签必须含非空有效 src 属性，否则触发 404 或渲染阻塞；alt 为内容图强制属性，需准确描述信息；响应式应使用 srcset/sizes 而非仅 CSS 缩放；路径须区分大小写且基于 HTML 文件位置。
HTML 插入图片必须用 <img> 标签，且 src 属性不可省略、不可为空；否则图片不显示，还可能触发 404 请求或破坏页面结构。
为什么 <img> 必须带 src，且不能是相对路径错误？
浏览器解析 <img> 时，只要遇到 src 属性就会立即发起 HTTP 请求。如果 src 缺失、写成 src="" 或路径拼错（比如漏掉 ./ 或多写斜杠），就会请求一个无效地址——轻则控制台报 404 Not Found，重则在某些旧版 Safari 中导致页面渲染阻塞。
-
src值必须是有效 URL：本地文件用相对路径（如src="images/logo.png"）或绝对路径（如src="/assets/icon.svg"），线上图用完整 URL（如src="https://example.com/photo.jpg"） - 路径区分大小写：Linux 服务器和大多数 CDN 都区分
Photo.jpg和photo.jpg，本地开发时容易忽略这点 - 不要用 CSS
background-image替代<img>来放内容图——语义丢失、无法被屏幕阅读器识别、SEO 不友好
alt 属性不是可选的，而是内容型图片的强制要求
如果图片承载信息（比如产品图、图表、按钮图标），alt 就不是“补充说明”，而是替代文本。空 alt="" 只适用于纯装饰性图片（且前提是该 <img> 确实没有语义作用）。
- 用户禁用图片、网络失败、使用读屏软件时，
alt是唯一可见/可听的内容来源 - 搜索引擎靠
alt理解图片上下文，影响页面相关性判断 - 写法示例：
<img src="chart.png" alt="2024年Q1用户留存率趋势：新用户7日留存达42%，环比上升5%">—— 具体、无“图”“照片”等冗余词
响应式图片要用 srcset + sizes，别只靠 CSS 宽高缩放
仅用 CSS 设置 width: 100% 会让手机下载桌面尺寸的大图，浪费带宽、拖慢首屏。真正适配需靠 HTML 原生响应式属性。
立即学习“前端免费学习笔记（深入）”；
-
srcset列出多个分辨率资源：srcset="logo-1x.png 1x, logo-2x.png 2x"或按宽度：srcset="banner-400w.jpg 400w, banner-800w.jpg 800w" -
sizes告诉浏览器“在什么视口宽度下用多宽的容器显示这张图”：sizes="(max-width: 600px) 100vw, 50vw" - 基础 fallback 仍需保留
src，否则不支持srcset的老浏览器会直接不显示 - 示例：
<img src="thumb.jpg" srcset="thumb-400.jpg 400w, thumb-800.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw" alt="缩略图">
常见错误：把图片当链接写进 href，或误用 <figure> 包裹方式
<img> 本身不是超链接，要跳转得用 <a> 包裹；而 <figure> 是语义容器，不是“让图片居中”的工具。
- 错误写法：
<a href="photo.jpg"><img src="thumb.jpg"></a>→ 点击后下载图片而非预览，应改用target="_blank"+rel="noopener"，或接入 lightbox 脚本 -
<figure>应配合<figcaption>使用，仅用于需要标题/说明的独立内容块（如文章插图、数据截图），非通用布局手段 - 居中图片请用 CSS：
display: block; margin: 0 auto;，而不是套一层没意义的<figure>
最容易被忽略的是 src 路径的运行时有效性——它取决于当前 HTML 文件所在位置，而非代码编辑器里的文件树视觉关系；调试时务必看浏览器 Network 面板里实际发出的请求地址，而不是凭感觉改路径。
