<img>标签必须在<body>内，仅写标签不显示图片；关键在src路径有效且可访问，alt为语义必需项，width/height防布局抖动，四者齐备才算引入成功。
<img> 标签必须出现在 <body> 内，且仅靠写标签本身不会让图片显示——关键在 src 和路径是否真正可访问。
src 属性必须存在且指向有效资源
src 是唯一强制属性，浏览器会立即发起请求；若值为空、拼写错误、或返回 404/403，图片位置就留白或显示破损图标。
- 常见错误：
src="Image.jpg"（大小写不匹配，实际文件是image.jpg） - 本地开发时误用
file://路径：现代浏览器默认拦截，尤其当 HTML 双击打开而非通过本地服务器访问 - 相对路径基准是 HTML 文件位置，不是 CSS 或 JS 文件——比如
index.html在根目录，src="images/logo.png"就要确保该路径下真有这个文件 - 绝对 URL 必须以
https://开头；写成www.example.com/img.jpg会被当作相对路径拼到当前域名下
alt 属性不是可选的“补充”，而是加载失败时的唯一 fallback
没有 alt，屏幕阅读器无法描述图像，搜索引擎无法理解内容，图片加载失败时用户也看不到任何提示。
-
alt=""仅适用于纯装饰性图片（如分隔线、背景占位），且需确认该图对语义无贡献 -
alt="公司 Logo"比alt="logo"更明确；避免写“图片”“此处为图片”这类冗余描述 - 若用
onerror回退到备用图，alt应同步更新，否则用户仍看到旧描述
width/height 属性影响布局稳定性，但不解决响应式问题
直接写 width="300" height="200" 会让浏览器提前预留空间，防止图片加载后页面跳动——这是它最实在的价值。
立即学习“前端免费学习笔记（深入）”；
- 只设一个尺寸（如
width="100%"）时，另一个会按原始比例缩放；但若原始宽高比和容器不一致，可能拉伸变形 - 这两个属性设置的是 CSS 像素值，不能写
width="100%"同时又加height="auto"（后者无效，height属性不支持auto值） - 真正做响应式，得靠 CSS：
max-width: 100%; height: auto;才能随容器缩放且保持比例
不要忽略图片加载失败的静默失败场景
外部图片挂了、CDN 限流、跨域策略拒绝、甚至 DNS 解析失败，都会导致 <img> 不渲染——但页面看起来只是“少了一块”，没报错也没提示。
-
onerror只在 HTTP 状态码非 2xx 时触发，对超时、CORS 阻止、DNS 失败等无效 - 更可靠的做法是预加载关键图或用
<picture>提供多源 fallback，而不是依赖单个src - 如果图片来自第三方，务必检查其 CORS 响应头是否含
Access-Control-Allow-Origin: *，否则即使 URL 正确，fetch()或 Canvas 读取也会失败
路径写对、src 可达、alt 有用、尺寸不破坏布局——这四点全满足，<img> 才算真正“引入成功”。其他所谓“高级技巧”，都是在这基础上的优化，不是替代方案。
