介绍
图像是现代网页的重要组成部分，能够使内容更具吸引力和视觉表现力。在 HTML 中，图像通过 <img> 标签嵌入到文档中。该标签功能强大，并配有多个属性来控制图像的来源、尺寸和辅助功能。
在本实验中，你将学习如何在网页上显示图像。你将从插入一张基础图像开始，然后逐步添加属性以提供替代文本、设置尺寸、添加工具提示，最后将其转换为可点击的链接。
实验环境已预先配置好 index.html 文件，并在 ~/project 目录下提供了一个名为 labex.svg 的图像文件。Web 服务器也已启动，因此你可以在「Web 8080」选项卡中实时预览你的更改。
使用 src 属性插入 img 标签以指定图像源
在这一步中，你将学习如何向 HTML 页面添加图像。<img> 标签用于嵌入图像。它是一个空标签，这意味着它没有结束标签。<img> 标签最重要的属性是 src，它指定了你想要显示的图像路径。
首先，使用左侧的文件浏览器打开 ~/project 目录下的 index.html 文件。
现在，在 <body> 部分内，即 <!-- Image will be added here --> 注释的正下方，添加 <img> 标签。将 src 属性设置为 labex.svg，这是项目目录中提供的图像文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Images Lab</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>My Image Page</h1>
<img src="labex.svg" />
</body>
</html>
添加代码后，保存文件。要查看结果，请切换到实验环境顶部栏的 Web 8080 选项卡。你应该能看到页面上显示的 LabEx 徽标。
为图像添加 alt 属性以提供描述
在这一步中，你将为 <img> 标签添加 alt 属性。alt 属性为图像提供替代文本。如果图像因某种原因无法加载，则会显示此文本。更重要的是，屏幕阅读器会使用它向视障用户描述图像，从而提高网站的无障碍性。
修改 index.html 文件中的 <img> 标签，加入 alt 属性。好的 alt 文本应该是对图像的简洁描述。
<img src="labex.svg" alt="LabEx Logo" />
现在，完整的 index.html 文件应如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Images Lab</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>My Image Page</h1>
<img src="labex.svg" alt="LabEx Logo" />
</body>
</html>
保存文件。由于图像加载正常，你在 Web 8080 选项卡中不会看到任何视觉变化。然而，添加 alt 属性是 Web 开发中至关重要的最佳实践。
使用 width 和 height 属性设置图像尺寸
在这一步中，你将学习如何使用 width 和 height 属性来控制图像的大小。默认情况下，浏览器会以原始尺寸显示图像。指定 width 和 height 可以让你调整图像大小，并帮助浏览器在图像加载前预留出正确的空间，从而防止页面布局发生偏移。
让我们将图像的宽度设置为 200 像素，高度设置为 50 像素。在 index.html 的 <img> 标签中添加 width 和 height 属性。
<img src="labex.svg" alt="LabEx Logo" width="200" height="50" />
完整的 index.html 文件现在将是：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Images Lab</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>My Image Page</h1>
<img src="labex.svg" alt="LabEx Logo" width="200" height="50" />
</body>
</html>
保存文件并切换到 Web 8080 选项卡。你会注意到图像已调整为你指定的尺寸。
使用 title 属性添加图像工具提示
在这一步中，你将为 <img> 标签添加 title 属性。title 属性提供了关于元素的额外信息。对于图像，当用户将鼠标悬停在图像上时，这些信息通常会以工具提示的形式显示。
让我们为图像添加一个标题，给用户提示点击它会发生什么（我们将在下一步实现点击功能）。在 index.html 的 <img> 标签中添加 title 属性。
<img
src="labex.svg"
alt="LabEx Logo"
width="200"
height="50"
title="Go to LabEx Homepage"
/>
你的 index.html 文件现在应包含以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Images Lab</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>My Image Page</h1>
<img
src="labex.svg"
alt="LabEx Logo"
width="200"
height="50"
title="Go to LabEx Homepage"
/>
</body>
</html>
保存文件并刷新 Web 8080 选项卡。现在，将鼠标光标移动到图像上。应该会出现一个带有「Go to LabEx Homepage」文本的小框。
将 img 包装在 a 标签中以实现可点击的图像链接
在最后一步中，你将使图像成为一个可点击的链接。为此，你需要将 <img> 标签包装在锚点标签 <a> 中。<a> 标签定义了一个超链接，其 href 属性指定了链接指向的页面 URL。
用 <a> 标签包装你现有的 <img> 标签。将 <a> 标签的 href 属性设置为 https://labex.io。
<a href="https://labex.io">
<img
src="labex.svg"
alt="LabEx Logo"
width="200"
height="50"
title="Go to LabEx Homepage"
/>
</a>
最终的 index.html 文件将如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Images Lab</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>My Image Page</h1>
<a href="https://labex.io">
<img
src="labex.svg"
alt="LabEx Logo"
width="200"
height="50"
title="Go to LabEx Homepage"
/>
</a>
</body>
</html>
保存文件并前往 Web 8080 选项卡。你会注意到，当你将鼠标悬停在图像上时，光标会变成指针形状，表明它是一个链接。点击图像将尝试跳转到 LabEx 主页。
总结
恭喜你完成了本次实验！你已经成功学会了如何在 HTML 中处理图像。
在本实验中，你涵盖了以下关键概念：
- 使用
<img>标签嵌入图像。 - 使用
src属性指定图像源。 - 使用
alt属性提供辅助功能所需的替代文本。 - 使用
width和height属性控制图像尺寸。 - 使用
title属性添加工具提示。 - 通过将图像包装在
<a>标签中使其成为可点击的链接。
这些是创建丰富且交互式网页的基本技能。现在，你可以自信地在未来的 HTML 项目中添加和管理图像了。
