img标签必须置于body内，head中会被忽略；路径须以HTML文件位置为基准，区分大小写；alt属性必须存在且语义准确；width/height应设真实尺寸防布局抖动。
img 标签必须放在 body 里，不能放 head 中
浏览器只在 body 区域渲染可见内容，img 是内容型元素，放在 head 中不会显示，也不会触发加载——它会被忽略，控制台通常不报错，但资源根本不会请求。
- 错误写法：
<img src="logo.png" alt="logo">→ 图片不出现，Network 面板查不到请求 - 正确位置：必须嵌入
body的语义容器内，比如<main></main>、<section></section>或直接放在段落中 - 例外情况：仅当用 CSS
background-image模拟图片时，才可能在head里通过<style></style>定义，但那已不是img标签了
src 路径写错是 404 的最常见原因
路径不是“看着像就行”，而是以 HTML 文件所在位置为起点的**相对坐标**。写错一个 ../ 或大小写不一致，就会 404。
- HTML 在
/pages/about.html，图片在/assets/icon.svg→ 正确写法：src="../assets/icon.svg" - HTML 和图片同目录：
src="photo.jpg"（注意不是./photo.jpg，虽部分浏览器容错，但非标准） - 子目录引用：
src="images/banner.png"（images/是 HTML 当前目录下的文件夹） - 大小写敏感：Linux 服务器上
Logo.PNG≠logo.png，本地开发可能不报错，上线就挂
alt 属性不是“可填可不填”，而是强制语义字段
W3C 规范要求 alt 必须存在；不写或写空字符串 alt="" 都合法，但语义不同：前者表示图片是纯装饰（应改用 CSS background-image），后者表示图片有内容但暂无描述。
- 内容图（如产品图、头像）必须写有意义的描述：
alt="黑色皮质办公椅，带腰部支撑" - 图标类小图可简写：
alt="搜索"、alt="微信分享" - 完全省略
alt：屏幕阅读器跳过该图，SEO 权重归零，且图片失效时显示空白方块 - 不要堆砌关键词：
alt="椅子 家具 办公椅 便宜 舒适"违反可访问性原则
width/height 不设或乱设会导致布局抖动
浏览器默认按图片原始尺寸占位。如果没设宽高，图片加载完成前页面会先留白，加载后突然撑开，引发 FOIT（Flash of Invisible Text）或 CLS（Cumulative Layout Shift）评分暴跌。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：显式写
width和height属性（不是 CSS），值为图片真实像素尺寸，例如<img src="a.jpg" style="max-width:90%" style="max-width:90%" alt="..."> - 响应式场景下，用 CSS 覆盖：
img { width: 100%; height: auto; }，但前提是 HTML 中仍保留原生宽高属性，让浏览器提前预留空间 - 切忌只设
width不设height，或设固定像素又加max-width: 100%却没配height: auto，容易拉伸变形
alt 的语义分级——很多人测试时在本地双击 HTML 能打开，就以为路径没问题，结果一丢到服务器就 404；也常把所有 alt 都写成空字符串，以为“反正看不见”，却不知这等于主动放弃可访问性和搜索曝光。 
