掌握 HTML 图片嵌入

介绍

HTML <img> 标签用于在网页中嵌入图像。它是一个空标签，这意味着它没有闭合标签。src 属性是必需的，用于指定图像的路径或 URL。其他可选属性包括 alt、title、height、width 等。在本实验中，你将学习如何使用 HTML <img> 标签将图像插入网页。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

设置你的项目

第一步是创建一个名为 "html-img-tag-lab" 的新目录，并在其中创建一个名为 "index.html" 的文件。在代码编辑器中打开该文件，并将以下代码添加到 <head> 部分：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML Img Tag Lab</title>
  </head>
  <body></body>
</html>

向网页中添加图片

要向网页添加图片，你需要一个图片文件。在这个示例中，假设你在根目录下的一个名为 "images" 的文件夹中有一个名为 "logo.png" 的图片。要使用 <img> 标签将此图片添加到网页中，请将以下代码添加到 <body> 部分：

<img src="images/logo.png" alt="Logo" />

在这段代码中，src 属性指定了图片文件的路径。alt 属性提供了在图片因某些原因无法加载时显示的替代文本。

为图片添加额外属性

你可以为图片添加多个额外属性来控制其外观和行为。以下是一个示例，展示了如何使用一些最常见的属性：

<img
  src="images/logo.png"
  alt="Logo"
  width="200"
  height="100"
  title="My Website Logo"
/>

在这段代码中，width 和 height 属性控制图片的尺寸。title 属性在用户将鼠标悬停在图片上时提供工具提示。

使用图片映射

图像映射（image map）是一种定义了可点击区域（即“热点”）的图像，这些区域可以链接到不同的目标。要创建图像映射，你需要定义每个热点的坐标及其链接的 URL。以下是一个图像映射的示例：

<img src="images/worldmap.gif" alt="World map" usemap="#worldmap" />

<map name="worldmap">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="https://www.northamerica.com"
    alt="North America"
  />
  <area
    shape="rect"
    coords="100,0,200,100"
    href="https://www.southamerica.com"
    alt="South America"
  />
  <area
    shape="rect"
    coords="200,0,300,100"
    href="https://www.europa.com"
    alt="Europe"
  />
  <area
    shape="rect"
    coords="300,0,400,100"
    href="https://www.asia.com"
    alt="Asia"
  />
  <area
    shape="rect"
    coords="400,0,500,100"
    href="https://www.africa.com"
    alt="Africa"
  />
</map>

在这段代码中，usemap 属性指定了映射的名称，该映射通过 <map> 标签定义。每个 <area> 标签通过指定其形状（例如 "rect" 表示矩形）、坐标及其链接的 URL 来定义一个热点。

添加图片作为背景

你也可以将图片用作 HTML 元素的背景，例如网页的 body 部分。以下是一个示例：

<style>
  body {
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

在这段代码中，background-image 属性指定了图片文件的路径，background-repeat 属性设置为不重复。background-size 属性将图片缩放以覆盖整个背景。

总结

恭喜！你已经成功学会了如何使用 HTML <img> 标签向网页中添加图片。你还学会了如何使用一些常见属性来控制图片的尺寸和外观，以及如何创建图像映射并将图片用作背景。