图片 img
<img> 是空元素，两个属性最关键：src 指定图片地址，alt 提供替代文字。alt 不是可写可不写的装饰——图片加载失败时显示它，屏幕阅读器朗读它，搜索引擎靠它理解图片内容。
建议始终给 img 写上 width 和 height 属性。浏览器据此提前预留空间，图片加载完成时页面不会跳动（术语叫布局偏移 CLS，是性能评分的重要指标）。图片不在首屏时，加 loading="lazy" 可以推迟加载。
格式选择的经验法则：照片用 JPEG/WebP，需要透明背景用 PNG/WebP，图标和简单图形用 SVG。
本节要点img 必备 src 和 alt；写上 width/height 防止页面跳动；非首屏图片加 loading="lazy"；格式按"照片 JPEG、透明 PNG、图标 SVG"选择。
HTML
<!-- alt 描述图片内容；宽高属性帮助浏览器预留空间 --> <img src="cat.jpg" alt="一只橘猫趴在窗台上" width="640" height="426"> <!-- 装饰性图片：alt 留空字符串，让屏幕阅读器跳过 --> <img src="divider.png" alt=""> <!-- 非首屏图片懒加载 --> <img src="long-page-photo.jpg" alt="页面底部的插图" loading="lazy"> <!-- 图片加载失败时会显示 alt 文字，所以 alt 要写得有意义 --> <img src="broken-path.png" alt="错误：图表加载失败">
