图像：向网页添加图片
在网页中插入并设置图像格式
图像：向网页添加图片 是 CoddyKit 上的免费 HTML for Kids 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML for Kids 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML for Kids 课程共包含 4 节课。
图像：向页面添加图片
欢迎来到下一课！今天，我们将学习如何向网页添加图像。图片可以让页面更具吸引力，也更有趣！
HTML 中的图像是什么？
网页中的图像使用 <img> 标签添加。这是一个自闭合标签，也就是说，它不需要像 </img> 这样的结束标签。
让我们学习如何使用它吧！
添加图像
要添加图像，请使用 src 属性指定图像文件的位置。
示例：
在此示例中：
src：指定图像文件。alt：当图像无法显示时提供替代文本。
<img src="https://www.w3.org/html/logo/img/html5-display.png"
alt="A beautiful view" />
替代文本（alt 属性）
alt 属性用于描述图像。这对无障碍访问非常重要，也能帮助搜索引擎理解您的图像。
示例：
如果图像无法加载，文本 "A beautiful sunset over the ocean" 将会显示出来。
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A beautiful sunset over the ocean" />
设置图像尺寸
您可以使用 width 和 height 属性控制图像的大小。
示例：
此示例将图像设置为宽 300 像素、高 200 像素。
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A red flower" width="300" height="200" />
为图像添加链接
将图像放在 <a> 标签内，就可以将图像变成可点击的链接。
示例：
点击图像后，用户将跳转到 https://example.com。
<a href="https://example.com">
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Example Logo" />
</a>
使用在线图像
您可以在 src 属性中指定图像的 URL，以使用托管在网上的图像。
示例：
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Online Image" />
动手试一试
让我们创建一个包含图像的简单网页。下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<title>My Image Page</title>
</head>
<body>
<h1>Welcome to My Gallery</h1>
<img src="cat.jpg" alt="A cute cat" width="400" />
<p>This is my adorable cat!</p>
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A playful dog" />
<p>This is a friendly dog from the internet!</p>
</body>
</html>
做得很好！
恭喜您！您已经学会了如何向网页添加图像、设置图像尺寸，甚至将图像链接到其他页面。图像可以让网页更有趣，视觉效果也更好。在下一课中，我们将学习如何创建表格来整理数据。准备好让页面更加实用吧！
常见问题解答
「图像：向网页添加图片」课时是免费的吗？
是的 — 「图像：向网页添加图片」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML for Kids 课程的其余内容，请升级到 CoddyKit PRO。 HTML for Kids 课程共包含 4 节课。
「图像：向网页添加图片」这节课中我会学到什么？
在网页中插入并设置图像格式 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML for Kids 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML for Kids 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「图像：向网页添加图片」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML for Kids 课中编写并运行代码吗？
能。每节 HTML for Kids 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 标题与段落
- 列表：有序列表和无序列表
- 链接：连接整个网络
- 图像：向网页添加图片