在本实验中，你将学习如何使用各种技术和属性在 HTML 中有效地插入和样式化图片。实验涵盖了基本技能，例如使用源文件和替代文本添加基本图片、设置固定图片尺寸、对齐图片以及创建信息丰富的工具提示。通过逐步的指导，你将获得操作图片元素以增强网页设计和改善用户体验的实践经验。
通过动手实践，你将探索不同的 HTML 属性，如 src、alt、width、height 和 title，以控制图片的展示和可访问性。这些技能对于希望创建视觉吸引力强且响应式网页的 Web 开发人员来说至关重要，能够确保图片的集成和样式化得当。
在这一步中，你将学习如何使用 <img> 标签及其基本属性向 HTML 页面添加基本图片。图片是网页设计的重要组成部分，能够使网页更具视觉吸引力和信息量。
首先，让我们创建一个 HTML 文件来进行操作。打开 WebIDE，在 ~/project 目录下创建一个名为 images.html 的新文件。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Images</title>
</head>
<body>
<!-- 我们将在这里添加图片 -->
</body>
</html><img> 标签是一个自闭合标签，用于在 HTML 文档中嵌入图片。它有两个关键属性：
src（source）：指定图片文件的路径alt（alternative text）：提供图片的文本描述让我们向 HTML 文件中添加一张图片：
<body>
<img
src="https://file.labex.io/static/images/labex-logo-dark.png"
alt="LabEx Logo"
/>
</body>src 属性指向图片的 URL，而 alt 属性提供了以下功能：
保存文件并在网页浏览器中打开以查看图片。
注意：了解更多关于如何在 WebIDE 中预览 HTML 文件的信息。
在这一步中，你将学习如何使用 HTML 中的 width 和 height 属性来控制图片的大小。这些属性允许你指定图片的精确尺寸，从而有助于改善页面布局和加载性能。
打开你在上一步中创建的 images.html 文件。我们将修改现有的图片并添加更多图片，以演示不同的尺寸设置技术。
HTML 提供了两个属性来设置图片尺寸：
width：以像素为单位设置图片宽度height：以像素为单位设置图片高度让我们更新之前的图片并添加一些新的示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Image Dimensions</title>
</head>
<body>
<!-- 原始图片，带有固定尺寸 -->
<img
src="https://file.labex.io/static/images/labex-logo-dark.png"
alt="LabEx Logo"
width="200"
height="100"
/>
<!-- 另一个图片，带有不同尺寸 -->
<img
src="https://file.labex.io/static/images/labex-logo-dark.png"
alt="LabEx Logo"
width="300"
height="150"
/>
<!-- 仅指定宽度的图片 -->
<img
src="https://file.labex.io/static/images/labex-logo-dark.png"
alt="LabEx Logo"
width="250"
/>
</body>
</html>关于图片尺寸的关键点：
在网页浏览器中查看示例输出，将显示三个不同尺寸的图片。
在这一步中，你将学习如何使用 HTML 中已弃用的 align 属性来定位图片。虽然现代网页设计使用 CSS 进行布局，但了解这种历史性的图片对齐方法仍然很重要。
打开之前步骤中的 images.html 文件，并修改它以演示不同的图片对齐方式：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Image Alignment</title>
</head>
<body>
<p>
<!-- 左对齐图片 -->
<img
src="https://file.labex.io/static/images/labex-logo-dark.png"
alt="LabEx Logo"
align="left"
width="150"
height="75"
/>
这段文本将围绕左对齐的图片流动。
</p>
<p>
<!-- 右对齐图片 -->
<img
src="https://file.labex.io/static/images/labex-logo-dark.png"
alt="LabEx Logo"
align="right"
width="150"
height="75"
/>
这段文本将围绕右对齐的图片流动。
</p>
<p>
<!-- 居中对齐图片 -->
<img
src="https://file.labex.io/static/images/labex-logo-dark.png"
alt="LabEx Logo"
align="middle"
width="150"
height="75"
/>
这段文本与图片的中间对齐。
</p>
</body>
</html>align 属性支持三个主要值：
left：将图片左对齐，文本围绕其流动right：将图片右对齐，文本围绕其流动middle：将图片与文本基线垂直对齐重要说明：
align 属性在 HTML5 中已被弃用float 或 flexbox 进行布局示例输出将显示图片在段落中的不同位置。
注意：Labby 对话框可能会遮挡右对齐的图片。
在这一步中，你将学习如何使用 title 属性为图片添加工具提示信息。工具提示在用户将鼠标悬停在元素上时提供额外的上下文或描述。
打开之前步骤中的 images.html 文件，并修改它以演示工具提示的用法：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Image Tooltips</title>
</head>
<body>
<!-- 带有简单工具提示的图片 -->
<img
src="https://file.labex.io/static/images/labex-logo-dark.png"
alt="LabEx Logo"
width="200"
height="100"
title="Official LabEx Logo"
/>
<!-- 带有更详细工具提示的图片 -->
<img
src="https://file.labex.io/static/images/labex-logo-dark.png"
alt="LabEx Logo"
width="200"
height="100"
title="LabEx Logo: Learn coding through hands-on labs"
/>
<!-- 多个带有不同工具提示的图片 -->
<div>
<img
src="https://file.labex.io/static/images/labex-logo-dark.png"
alt="Programming Logo"
width="150"
height="75"
title="Web Development"
/>
<img
src="https://file.labex.io/static/images/labex-logo-dark.png"
alt="Cloud Logo"
width="150"
height="75"
title="Cloud Computing"
/>
</div>
</body>
</html>关于 title 属性的关键点：
当你在网页浏览器中悬停在这些图片上时，你将看到工具提示文本出现。
在本实验中，参与者通过掌握图片嵌入和样式化的关键技术，学习了如何在 HTML 中有效地处理图片。实验涵盖了基本技能，例如使用 <img> 标签及其关键属性（如 src 和 alt）添加图片，以确保图片的正确显示和可访问性。学习者探索了通过 width 和 height 属性控制图片尺寸的方法，理解了这些设置如何影响页面布局和性能。
实践练习引导学生掌握了各种图片操作技术，包括设置固定图片尺寸、使用 title 属性添加工具提示信息，以及尝试不同的图片对齐策略。通过动手操作 HTML 图片元素，参与者获得了创建视觉吸引力强且响应式网页设计的宝贵经验。
