在本实验中，你将通过逐步操作学习如何创建第一个包含图片的 HTML 网页。实验将引导你完成以下步骤：设置一个结构化的项目目录、下载图片资源、创建一个基本的 HTML 文档，并将图片插入网页中。你将获得组织网页开发文件、使用 HTML 图片标签以及理解图片在网页中显示方式的实践经验。
完成本实验后，你将创建一个简单但功能齐全的 HTML 页面，展示基本的网页开发技能，包括项目结构管理、图片处理和基本 HTML 文档创建。这种实践方法为初学者提供了一个坚实的基础，帮助他们开启网页开发之旅。
在这一步中，你将设置项目结构，用于创建第一个包含图片的 HTML 页面。一个组织良好的项目结构对于保持网页开发文件的整洁和可管理性至关重要。
虚拟机设置已经为你创建了项目结构。检查 my-first-webpage 目录：
ls my-first-webpage这种结构帮助你分离不同类型的文件：
images/ 将存储你的图片资源css/ 可用于存放样式文件（尽管本实验中不会使用它）让我们验证目录结构：
tree示例输出：
.
├── css
└── images很好！你现在已经设置了一个干净且组织良好的项目结构，这将使管理你的网页开发文件变得更加容易。
在这一步中，你将下载一张图片，用于你的第一个 HTML 网页。我们将使用一张简单且免费的网络图片，并将其保存到你之前创建的 images 目录中。
首先，导航到你的项目目录：
cd ~/project/my-first-webpage让我们验证图片是否正确下载：
ls images示例输出：
landscape.jpg如果你没有看到图片文件，可能需要通过以下命令下载。如果你在
images目录中看到了图片文件，可以跳过此步骤。
wget -O images/landscape.jpg "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80"检查图片文件的详细信息：
file images/landscape.jpg示例输出：
images/landscape.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 1170x780, components 3现在，这张图片已经准备好用于你的 HTML 页面。我们下载了一张风景图片，非常适合演示如何在 HTML 中插入图片。
在这一步中，你将创建一个基本的 HTML 文档，作为你第一个网页的基础。HTML（超文本标记语言）是用于创建网页的标准标记语言。
导航到你的项目目录：
cd ~/project/my-first-webpage打开 WebIDE 并创建一个名为 index.html 的新文件：
touch index.html现在，让我们添加基本的 HTML 结构。在 WebIDE 中打开 index.html 文件，并输入以下代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage</h1>
<p>This is a simple HTML page I'm creating to learn web development.</p>
</body>
</html>让我们分解一下这个 HTML 文档的关键组成部分：
<!DOCTYPE html> 声明这是一个 HTML5 文档<html> 是 HTML 页面的根元素<head> 包含文档的元信息<body> 包含页面的可见内容<h1> 是一个主标题<p> 是一个段落在这一步中，你将学习如何将下载的风景图片插入到你的 HTML 页面中。<img> 标签用于在 HTML 中嵌入图片。
在 WebIDE 中打开你的 index.html 文件，并修改内容以包含图片：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage</h1>
<p>This is a simple HTML page I'm creating to learn web development.</p>
<h2>Beautiful Landscape</h2>
<img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />
</body>
</html>让我们分解一下图片标签的属性：
src：指定图片文件的路径alt：为可访问性提供替代文本width：设置图片的显示宽度（以像素为单位）在这一步中，你将学习如何预览你的 HTML 页面，并理解图片在网页浏览器中的显示方式。由于 LabEx 环境提供了带有内置预览功能的 WebIDE，你可以立即查看你的网页。
要预览你的网页，请在 WebIDE 中寻找“Go Live”按钮。
点击页面中的 my-first-webpage 文件夹，它将自动以预览模式打开 index.html 文件。
这将启动你的 index.html 文件的实时视图，显示你添加的风景图片。
让我们探讨一些关于 HTML 中图片显示的关键概念：
src 属性指定了图片的相对路径：
<img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />/)width：控制图片的显示大小（以像素为单位）alt：为可访问性提供文本描述height 来设置图片尺寸为了使图片具有响应性，你可以使用 CSS 或调整 HTML 属性：
<img
src="images/landscape.jpg"
alt="Scenic Landscape"
style="max-width: 100%; height: auto;"
/>style 属性用于设置图像的显示大小。这是一个 CSS 属性，允许你控制图像的宽度和高度。
max-width: 100%; 确保图像不超过容器的宽度height: auto; 保持图像的宽高比现在不必担心 CSS，我们将在后续实验中详细介绍。
在 WebIDE 预览中验证你的图片是否正确显示。你应该看到：
在本实验中，参与者学习了如何通过设置结构化的项目环境并处理图片来创建他们的第一个 HTML 网页。实验从使用终端命令建立清晰的目录结构开始，创建了用于存放图片和 CSS 的专用文件夹，这有助于保持网页开发文件的组织性。
实验引导学习者使用 wget 从 Unsplash 下载示例风景图片，展示了文件管理和资源获取的实用技能。通过系统地组织项目文件并获取图片资源，参与者掌握了准备网页开发项目和处理 HTML 页面图片资源的基础知识。
