欢迎来到本次 HTML 教程！🌟 在这一章节中，我们将探讨如何在 HTML 中插入图片。图片是网页设计中不可或缺的元素，能够增强视觉效果，丰富内容展示。
步骤 1：准备图片
首先，我们需要一张图片来练习。您可以在网络上搜索，例如搜索“猫”，找到喜欢的图片，右键点击并选择“另存为”，将其命名为 cat.jpg，然后保存。
步骤 2：将图片添加到项目中
将刚刚下载的 cat.jpg 图片拖入您的项目文件夹中，确保它与您的 index.html 文件位于同一目录。
步骤 3：在 HTML 中插入图片
打开您的 index.html 文件，并启动 Live Server 以实时预览效果。
要插入图片，我们使用自闭合的 <img> 标签。输入 <img>，并为其添加两个属性：
alt：图片的替代文本，当图片无法加载时显示。例如，alt="猫猫图"。
src：图片的来源路径。在这里，我们输入 src="./cat.jpg"。
步骤 4：调整图片大小
如果没有设置尺寸，图片会以原始大小显示，可能过大或过小。我们可以使用 width 和 height 属性来调整图片尺寸。例如，设置高度为 200 像素，宽度会按比例自动调整：
步骤 5：处理图片加载错误
当图片路径错误或图片不存在时，浏览器会显示替代文本（alt）。您可以在 alt 属性中添加描述，以告知用户图片的内容或用途。
步骤 6：将图片作为超链接
如果您希望点击图片时跳转到另一个页面，可以将 <img> 标签嵌套在 <a> 标签内。例如，点击图片跳转到 Google：
步骤 7：组织图片文件
为了更好地管理项目文件，您可以创建一个名为 images 的文件夹，将图片存放其中。然后，在 src 属性中更新图片路径：
通过本教程，您已经学会了如何在 HTML 中插入图片、调整尺寸、处理加载错误，以及将图片作为超链接。这些技巧将帮助您创建更丰富多彩的网页内容。
感谢您阅读本教程！如果在学习过程中有任何疑问，或者有其他想了解的内容，欢迎在评论区与我们互动~👇 我会尽力解答您的问题，并期待与大家一起交流学习！🌈 您的每一个分享和反馈，都会让更多初学者受益哦！😊