14 超链接与图像之图像的插入

在上一章中，我们探讨了 超链接 的使用，了解了如何通过 <a> 标签创建链接，实现网页之间的跳转。而本章将聚焦于如何在网页中插入 图像，使得内容更加生动、形象化。

图像的插入

在 HTML 中，插入图像的主要标签是 <img>。这个标签是一个自闭合标签，也就是说，它不需要结束标签。基本的图像插入格式如下：

<img src="图像的URL" alt="替代文本" />

关键属性

• src：指定图像的文件路径或 URL。它是必需的属性。
• alt：替代文本，当图像无法显示时，用户会看到这个文本。此外，对于使用屏幕阅读器的用户，这段文本有助于他们理解图像内容。

示例：插入一张图像

假设你有一张名为 example.jpg 的图像，存储在当前文件夹中。要插入这张图像，你可以使用以下代码：

<img src="example.jpg" alt="这是一个示例图像" />

以上代码将在网页中显示一张名为 “示例图像” 的图片。

图像的大小调整

你可以通过 width 和 height 属性来调整图像的显示大小，代码如下：

<img src="example.jpg" alt="这是一个示例图像" width="300" height="200" />

这段代码会将图像调整为 300 像素宽和 200 像素高。

图像的响应式设计

为了使图像在不同设备上自适应，可以使用 CSS 设置图像的样式。例如，以下代码会使图像的宽度适应其父元素：

<style>
  img {
      max-width: 100%;
      height: auto;
  }
</style>

<img src="example.jpg" alt="这是一个示例图像" />

这段 CSS 代码将确保图像不会超出其容器的宽度，同时保持其纵横比。

多种格式的图像

在网页中，我们可以使用多种图像格式，如 JPEG、PNG、GIF 等。不同格式的图像具有不同的特性：

• JPEG：适合拍摄照片，压缩后质量损失较少。
• PNG：支持透明背景，适合使用图标和图形。
• GIF：一般用于动画效果的短视频或图像。

使用背景图像

除了使用 <img> 标签插入图像，我们还可以将图像作为背景使用。示例如下：

<style>
  .background {
      background-image: url('background.jpg');
      height: 300px;
      width: 100%;
      background-size: cover;
      background-position: center;
  }
</style>

<div class="background"></div>

在这个例子中，我们创建了一个名为 background 的 CSS 类，将 background.jpg 设置为背景图像，并设置其大小和位置。这样，您就可以使用 CSS 来灵活控制图像的显示。

小结

在本章中，我们学习了如何在 HTML 文档中插入图像，包括基础语法、重要属性和各种格式的使用。插入图像不仅可以提高网页的美观性，还能帮助传达信息，增强用户体验。

在下一章中，我们将继续探讨 图像属性，了解如何进一步优化图像元素，以提高网页性能和可访问性。这里的内容和示例为您打下了基础，期待您在接下来的学习中有所收获！