HTML 图片 — img 标签详解
img 标签插入图片、src/alt/width/height 属性、图片格式 · 难度：入门 · +15XP
HTML 图片 — <img> 标签
<img> 标签用于在网页中插入图片。它是自闭合标签，不需要结束标签。
基本语法
<img src="图片地址" alt="替代文字">核心属性
| 属性 | 必须 | 说明 |
|---|---|---|
src | ✅ | 图片的 URL 地址（可以是相对路径或绝对路径） |
alt | ✅ | 图片无法显示时的替代文字，无障碍访问必需 |
width / height | 可选 | 图片宽高（像素），建议用 CSS 控制 |
loading | 可选 | lazy 表示懒加载（滚动到才加载） |
图片格式选择
| 格式 | 适用场景 |
|---|---|
| JPEG | 照片、复杂颜色图片 |
| PNG | 需要透明背景的图片 |
| WebP | 现代格式，体积更小（推荐） |
| SVG | 图标、Logo、矢量图形 |
| GIF | 简单动画 |
动手试试
- 把 src 改成你自己喜欢的图片链接
- 试试去掉 alt 属性，然后用一个错误链接看效果
- 试试加 loading="lazy" 属性