图片 · 跟马丁学编程

给网站添加照片和图片——并学会把它们整齐地放在文件夹里。

跟我看：图片标签

图片用 <img> 标签添加：

<img src="images/school.jpg" alt="Our school building">

这里有两件事值得解释：

src（source，来源）说明图片 在哪里。这里是：在 images 文件夹里，文件叫 school.jpg。
alt（alternative，替代文字）是图片的文字描述。图片加载失败时会显示它，屏幕阅读器也会读出来给看不见的人听。一定要填写——这既礼貌，也是专业人士的标准做法。

还有一件事：<img> 没有闭合标签。它不会”包裹”什么，只是插入自己——有些标签就是这样工作的。

💡

图片从哪来？ 你自己的照片（请家长发到你的电脑上）、自己画的画扫描或拍照——或者从 pixabay.com 这样的网站找免费图片。不要直接从 Google 抓图片——大多数都属于别人，未经许可不能用。

保持整洁：图片文件夹

在 VS Code 里，在你的 my-website 文件夹中 新建一个文件夹，命名为 images（左上角带加号的文件夹图标）。
复制 2–3 张图片进去。你甚至可以直接拖放到 VS Code 里。
简单命名：小写字母，不要重音符号，不要空格。比如 school.jpg、field.jpg、trip-mountains.jpg。这会帮你省很多麻烦。

轮到你了 💪

在页面上添加至少两张符合内容的图片（可以一张放在主标题下面，一张放在某个章节里）。

🏫 学校网站——参考答案

<h1>Riverside Elementary School</h1>
<img src="images/school.jpg" alt="Our school building">
<p>Welcome to our school's website.</p>

<h2>Clubs</h2>
<img src="images/gym.jpg" alt="Our gym during a floorball game">
<ul>
  <li>floorball</li>
  <li>ceramics</li>
</ul>

🙋 个人网站——参考答案

<h1>Hi, I'm Jake</h1>
<img src="images/me.jpg" alt="Me with a soccer ball">

<h2>What I Like</h2>
<img src="images/minecraft-build.jpg" alt="My castle built in Minecraft">
<p>More than anything, soccer and Minecraft.</p>

🌍 旅行日记——参考答案

<h1>Where We've Been 🌍</h1>

<h2>Last Trip: The Mountains</h2>
<img src="images/mountains.jpg" alt="View from the summit over the forest">
<p>Over the summer we hiked through the mountains.</p>

<h2>Greece 2025</h2>
<img src="images/sea.jpg" alt="A bay with crystal-clear water">

⚽ 俱乐部网站——参考答案

<h1>Riverside Eagles FC</h1>
<img src="images/team.jpg" alt="Our team photo after the match">

<h2>Recent Results</h2>
<img src="images/match.jpg" alt="Owen scoring a goal against the Wildcats">

⚠️

图片显示不出来？ 检查：1）代码里的名字和文件名完全一致（大小写也要一样！），2）图片真的在 images 文件夹里，3）你没有忘记保存和刷新页面。更多帮助请看出问题时怎么办这一章。

✅

检查一下： 页面上能看到你的图片。它们可能太大或拉伸变形——没关系，等我们学到 CSS 就会调整大小。

这堂课你要记住

<img src="..." alt="..."> 标签插入图片——它没有闭合标签。
alt 用文字描述图片。一定要填写。
把图片放在 images 文件夹里，简单命名：小写，不要空格或重音符号。