基本语法
<img src="图片地址" alt="替代文本">
🔹 常用属性
| 属性 | 说明 |
|---|
src | 图片的路径（地址），可以是相对路径或绝对路径 |
alt | 图片无法加载时显示的文字，同时有利于 SEO 和无障碍访问 |
width | 设置图片宽度（可以用像素或百分比） |
height | 设置图片高度 |
title | 鼠标悬停时显示的提示文字 |
loading | 图片懒加载：lazy（延迟加载）、eager（立即加载） |
srcset | 响应式图片，根据屏幕分辨率加载不同图片 |
sizes | 配合 srcset，指定在不同视口下的图片显示大小 |
crossorigin | 跨域请求控制，常用于 CORS 配置 |
示例
插入本地图片
<img src="images/photo.jpg" alt="一张风景图">
设置宽高
<img src="photo.jpg" width="200" height="150" alt="风景图">
添加提示
<img src="photo.jpg" title="这是风景图" alt="风景图">
响应式图片（srcset）
<img
src="small.jpg"
srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
alt="自适应图片">
图片懒加载（loading="lazy"）
<img src="big-photo.jpg" loading="lazy" alt="懒加载图片">
注意事项
- 图片加载失败时应有
alt 文本提示用户。
- 图片资源尽量压缩优化，提升网页性能。
- 使用
loading="lazy" 提高首屏加载速度。
- 响应式设计时推荐使用
srcset 和 <picture>。
