图片与图注

这一节要完成什么

为主页加入一张作品截图，让图片加载失败或无法看见时仍能理解内容。

先理解：为什么要学它

图片不是装饰语法。src 决定文件位置，alt 传递图片承担的信息，宽高帮助浏览器提前留出空间。图注则说明图片与上下文的关系。

跟着做

<figure>
  <img
    src="images/first-page.png"
    alt="浏览器中显示我的 HTML 学习主页，包含学习进度和第一周记录"
    width="960"
    height="540"
  />
  <figcaption>完成第 4 节后的主页截图。</figcaption>
</figure>

1. 在根目录新建 images 文件夹，把一张自己的页面截图命名为 first-page.png 放进去。
2. 将 figure 放进学习记录 article。刷新后确认图片可见。
3. 临时把文件名改错，观察 alt 是否能在图片失败时传递核心信息，然后恢复。
4. 找到图片的真实像素尺寸并填写 width、height。它们描述比例，之后仍可用 CSS 缩放。

关键代码怎么读

• 信息图片的 alt 描述“这张图在此处告诉读者什么”，不必写“图片：”。
• 纯装饰图片使用 alt=""，让朗读器跳过；不能省略 alt。
• figure 把自包含内容与 figcaption 组合，不是每张图片都必须用。

常见错误：看到什么，检查什么

扩展：音频、视频与嵌入页面

图片之后最常见的是媒体和嵌入内容。它们不必死记，但要知道选择原则：

<video controls width="640" poster="images/video-cover.jpg">
  <source src="media/learning-demo.mp4" type="video/mp4" />
  你的浏览器无法播放视频，请<a href="media/learning-demo.mp4">下载视频</a>。
</video>

• audio 和 video 使用 controls 提供浏览器原生播放操作；不要自动播放带声音的内容。
• 视频要提供字幕轨道，重要音频要提供文字稿。这些替代内容承担的信息比播放器本身更重要。
• iframe 会把另一个页面嵌进当前页面。只有确有必要时使用，并写准确 title，例如 title="课程演示视频"。
• svg 适合可缩放图标和图形，canvas 适合用脚本逐像素绘制。两者属于后续专题，不能用来替代普通标题、文字和图片。

自己完成一次

判断两种情况的 alt：课程完成证书截图；标题旁纯装饰的小星星。分别写出合适的 img。

完成检查

• 我的页面出现了本节要求的新内容
• 我能不用看答案解释关键标签或属性
• 我主动制造并修复了至少一个错误