38. 模块四回顾与测验

模块四我们围绕网页上的图像展开，从最基本的 <img> 标签到响应式图片方案。来一起回顾一下。

核心知识点回顾

img 标签

<img> 是网页中嵌入图片的核心标签，两个必备属性：

<img src="photo.jpg" alt="一张风景照片">

• src：图片路径（绝对或相对路径）
• alt：替代文本，图片无法显示时出现，也是屏幕阅读器朗读的内容

图像格式选择

格式	特点	适用场景
JPEG	有损压缩、体积小、不支持透明	照片、复杂色彩图片
PNG	无损压缩、支持透明	图标、需要透明的图片
WebP	体积小、质量高、支持动画	现代浏览器首选
SVG	矢量、无限缩放不失真	图标、Logo、简单图形

响应式图片

当不同设备需要不同尺寸的图片时，用 <picture> 元素：

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)">
  <source srcset="medium.jpg" media="(min-width: 400px)">
  <img src="small.jpg" alt="响应式图片">
</picture>

浏览器会匹配第一个符合条件的 <source>，都不匹配就用 <img> 作为兜底。

原生懒加载

给 <img> 加上 loading="lazy"，图片滚动到视口附近才加载：

<img src="photo.jpg" alt="懒加载图片" loading="lazy">

这能显著提升首页加载速度，尤其图片多的页面。

figure 和 figcaption

图片加说明文字的语义组合：

<figure>
  <img src="chart.png" alt="2024年月度销售数据图表">
  <figcaption>图1：2024年月度销售数据</figcaption>
</figure>

<figure> 不限于图片，也可以包裹代码块、引用、图表等独立内容。

SVG 入门

SVG 可以直接嵌入 HTML：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue">
</svg>

SVG 是矢量图，放大不会失真，非常适合图标和简单图形。

测验题

第1题：下面哪个 alt 文本写法最合适？

<!-- A -->
<img src="logo.png" alt="图片">

<!-- B -->
<img src="logo.png" alt="公司Logo">

<!-- C -->
<img src="logo.png">

答案是 B。A 太泛泛，C 缺少 alt 属性。alt 应该描述图片的含义，不是”图片”两个字。

第2题：关于 <picture> 元素，下面说法正确的是？

• A. <picture> 会替代 <img>
• B. <img> 是 <picture> 的兜底方案
• C. <picture> 不能和 srcset 一起用

答案是 B。<picture> 内部必须包含一个 <img> 作为兜底，不支持 <picture> 的旧浏览器会直接渲染 <img>。

第3题：loading="lazy" 的作用是？

• A. 让图片更清晰
• B. 延迟加载图片，滚动到附近才加载
• C. 让图片变成灰度

答案是 B。懒加载能减少首屏加载时间。

第4题：下面哪种场景最适合用 SVG？

• A. 一张人物照片
• B. 一个网站 Logo
• C. 一张风景壁纸

答案是 B。Logo 需要多尺寸显示，SVG 矢量特性让它无论放多大都不失真。

第5题：<figcaption> 应该放在哪里？

• A. <figure> 外部
• B. <figure> 内部
• C. <img> 内部

答案是 B。<figcaption> 是 <figure> 的子元素，用于描述 <figure> 中的内容。

模块四知识地图

图像与响应式图片
├── img 标签（src、alt、width/height）
├── alt 文本与可访问性
├── 图像格式（JPEG/PNG/WebP/SVG）
├── SVG 矢量图入门
├── picture 元素与响应式图片
├── 原生懒加载（loading="lazy"）
└── figure 与 figcaption

小结

模块四的核心理念：图片不只是”放上去就行”，要关注可访问性（alt）、性能（懒加载、格式选择）和响应式（picture）。

下一章开始，我们进入模块五：列表。