上一节的 href 指向链接目的地。这一节使用另一种带路径的属性 src，让浏览器找到要显示的图片。图片使用空元素 img，不写结束标签。
<img src="images/leaf.svg" alt="一片绿色的叶子" width="240" height="160">src 是图片地址。这里表示 HTML 文件所在目录下 images 文件夹里的 leaf.svg。SVG 是一种图片文件格式，PNG 和 JPEG 也很常见；这一节只需要像使用普通图片一样引用它。若文件不存在、路径大小写不一致或图片无法加载，浏览器就不能正常显示图片。
alt 不是装饰性的说明
alt 提供图片的替代文本。看不到图片的读者需要通过它理解图片在当前页面中的作用；图片加载失败时浏览器也可能显示它。应描述与内容相关的信息，而不是只写“图片”。如果图片是一张活动时间表，替代说明必须传达关键安排，不能只说“一张表”。复杂信息最好同时用正文写出。
纯装饰图片没有需要传达的额外信息时，可以使用 alt=""，让辅助技术通常略过它。空 alt 与省略 alt 不一样；不要为了省事删掉属性。alt 也不是鼠标悬停提示框，不要与 title 混淆。
尺寸与说明文字
width 和 height 可用不带单位的整数提供图片宽高，帮助浏览器提前预留空间。保持与图片原始比例一致，避免拉伸失真。后面的 CSS 将介绍更灵活的尺寸控制。Lab 中的示例图片是 240 × 160，窄屏预览还会限制图片不超过预览宽度。
如果图片需要一段可见的说明文字，可以使用 figure 包住图片，再用 figcaption 写说明。figure 表示可以作为一个整体理解的内容，默认可能带有边距；figcaption 在页面上可见，而 alt 主要是替代图片的信息，两者可以互补。
<figure>
<img src="images/leaf.svg" alt="浅色背景上的绿色叶片" width="240" height="160">
<figcaption>读书社的自然主题书签。</figcaption>
</figure>Lab 自带一张本地示例图片，不需要外部图床。先查看正常图片，再切换到“图片缺失”，观察替代文本。复制到本机时，要把示例图片一同保存到相应路径，或把 src 改成你自己的图片文件；只有 HTML 文件不会自动带上图片。
可下载示例图片，用于本机练习。
页面实验：图片
先切换对照示例，再按照观察提示修改一处 HTML，比较源码与真实页面。示例中的英文短句可以替换成自己的文字。
可见说明来自 figcaption；尝试修改 alt 后切换缺失图片观察区别。
预览保留浏览器默认的标题、段落和表单外观。示例切换会替换编辑内容；重置实验可恢复初始状态。可点击页内链接、输入文字和选择选项；此练习预览不提交数据、不运行脚本。要在本机尝试，将完整代码保存为 index.html 后用浏览器打开。
知识测验
动手编写：图片
新建 index.html，按照下面的要求编写完整页面；保存并用浏览器打开，边操作边检查结果。参考答案是一种实现，文字内容可以不同。
- 使用一张自己的图片，写出正确 src、有意义的 alt，以及保持原比例的 width 和 height。
- 用 figure 和 figcaption 添加可见说明，临时改错路径检查替代文本后再恢复。