介绍
图片是现代网页的重要组成部分，能使内容更具吸引力和视觉吸引力。在 HTML 中，图片通过 <img> 标签嵌入到文档中。这个标签功能强大，并附带多个属性来控制图片的来源、大小和可访问性。
在本实验中，你将学习如何在网页上显示图片。你将从插入一个基础图片开始，然后逐步添加属性，提供替代文本、设置其尺寸、添加工具提示（tooltip），最后将其变成一个可点击的链接。
环境已预先配置好，在 ~/project 目录下包含一个名为 index.html 的文件和一个名为 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 的 Logo。
添加 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 属性为元素提供额外信息。对于图片，当用户将鼠标悬停在图片上时，这些信息通常会显示为工具提示（tooltip）。
让我们为图片添加一个标题，提示用户点击它会发生什么（我们将在下一步实现）。在 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 项目中自信地添加和管理图片了。
