欢迎来到 HTML 个人网页项目！在这个实验中，你将使用 Web 的基本构建块：HTML，从头开始构建一个完整、单页的网站。这个实践项目专为初学者设计，将指导你掌握创建结构化、内容丰富的网页所需的关键标签和概念。
你将学习如何：
Web 服务器和基础样式（CSS）已为你预先配置好。你的主要重点将是编写干净、语义化的 HTML。你可以在实验环境中切换到 Web 8080 标签页，实时预览你的工作成果。让我们开始吧！
在这个步骤中，你将设置 HTML 文档的基本结构。每个 HTML 页面都有一个标准的样板结构，包括 <!DOCTYPE>、<html>、<head> 和 <body> 标签。
<!DOCTYPE html>：此声明定义文档类型为 HTML5。<html>：这是 HTML 页面的根元素。<head>：此元素包含关于文档的元信息，例如其标题和样式表链接。<head> 中的内容本身不会在页面上显示。<title>：此标签设置浏览器标签页的标题。<body>：此元素包含在浏览器中显示的可见页面内容。首先，使用左侧的文件浏览器打开位于 ~/project 目录下的 index.html 文件。该文件目前是空的。将以下代码复制并粘贴到 index.html 中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Personal Webpage</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<!-- Content will go here in the next steps -->
</div>
</body>
</html>粘贴代码后，保存文件（Ctrl+S 或 Cmd+S）。现在，点击实验界面顶部的 Web 8080 标签页。你应该会看到一个空白页面，但请注意，浏览器标签页的标题现在是“My Personal Webpage”。
在这个步骤中，你将使用标题和段落为你的网页添加第一批可见内容。这些是用于组织文本的基础标签。
<h1>：这是一个顶级标题标签，通常用于页面的主标题。搜索引擎使用标题来索引你网页的结构和内容。<p>：这是段落标签，用于文本块。让我们将你的名字作为主标题，并添加一段简短的个人简介。在你的 index.html 文件中，找到 <div class="container"> 内的注释 <!-- Content will go here in the next steps -->，并用以下代码替换它：
<h1>John Doe</h1>
<p>
Welcome to my personal webpage! I am a passionate web developer learning the
fundamentals of HTML. I enjoy creating clean and efficient code to build
beautiful and functional websites.
</p>现在，你的完整 index.html 文件应该如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Personal Webpage</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<h1>John Doe</h1>
<p>
Welcome to my personal webpage! I am a passionate web developer learning
the fundamentals of HTML. I enjoy creating clean and efficient code to
build beautiful and functional websites.
</p>
</div>
</body>
</html>保存文件并刷新 Web 8080 标签页。你现在将在页面上看到你的名字和个人简介。
在这个步骤中，你将使用列表来组织信息，例如你的技能或兴趣。HTML 提供了两种主要的列表类型：无序列表 (<ul>) 用于没有特定顺序的项目，有序列表 (<ol>) 用于编号的项目。列表中的每个项目都用 <li>（列表项）标签定义。
让我们使用无序列表添加一个技能部分。在上一 步中添加的段落标签 (<p>) 下方添加以下代码。
<h2>My Skills</h2>
<ul>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>Python</li>
<li>Problem Solving</li>
</ul>这段代码添加了一个二级标题 (<h2>) 来为该部分命名，以及一个无序列表 (<ul>) 和四个列表项 (<li>)。
添加代码后，你的 index.html 文件的 <body> 部分应该如下所示：
<body>
<div class="container">
<h1>John Doe</h1>
<p>
Welcome to my personal webpage! I am a passionate web developer learning
the fundamentals of HTML. I enjoy creating clean and efficient code to
build beautiful and functional websites.
</p>
<h2>My Skills</h2>
<ul>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>Python</li>
<li>Problem Solving</li>
</ul>
</div>
</body>保存文件并检查 Web 8080 标签页，查看你带有项目符号列表的新技能部分。
在这个步骤中，你将通过添加图片和超链接来使你的页面更具动态性。
<img>：图片标签用于嵌入图片。它是一个自闭合标签，需要两个必需的属性：
src：指定图片文件的路径。alt：为图片提供替代文本，这对于可访问性以及图片无法显示时非常重要。<a>：锚点标签用于创建超链接。href 属性指定链接的目标 URL。首先，让我们添加一张个人资料图片。设置脚本已经将一个占位符图片放在了 images/profile.png。在 <h1> 标签正下方添加 <img> 标签。
接下来，让我们添加一个指向外部网站的链接，例如 GitHub 个人资料。我们将把它放在一个新的“在线找到我”部分。在你的技能列表下方添加以下代码：
<!-- Add this img tag below the h1 tag -->
<img src="images/profile.png" alt="A placeholder profile picture" />
<!-- Add this new section below the skills list -->
<h2>Find Me Online</h2>
<p>
You can find my work on
<a href="https://github.com/labex-labs" target="_blank">GitHub</a>.
</p>链接上的 target="_blank" 属性告诉浏览器在新标签页中打开链接。
现在，你的 index.html 文件 <body> 部分的结构应该如下所示：
<body>
<div class="container">
<h1>John Doe</h1>
<img src="images/profile.png" alt="A placeholder profile picture" />
<p>
Welcome to my personal webpage! I am a passionate web developer learning
the fundamentals of HTML. I enjoy creating clean and efficient code to
build beautiful and functional websites.
</p>
<h2>My Skills</h2>
<ul>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>Python</li>
<li>Problem Solving</li>
</ul>
<h2>Find Me Online</h2>
<p>
You can find my work on
<a href="https://github.com/labex-labs" target="_blank">GitHub</a>.
</p>
</div>
</body>保存文件并刷新 Web 8080 标签页。你将看到个人资料图片和一个可点击的链接。
在这个最后的 content 步骤中，你将添加两个更复杂的结构：一个用于显示日程的表格，以及一个允许访客联系你的表单。
<table>：定义一个表格。
<tr>：定义表格中的一行。<th>：定义一个表头单元格（默认粗体居中）。<td>：定义一个数据单元格。<form>：定义一个用于用户输入的 HTML 表单。
<label>：为 <input> 元素定义一个标签。<input>：定义一个输入字段。type 属性可以是 text、email、password 等。<textarea>：定义一个多行文本输入区域。<button>：定义一个可点击的按钮。首先，添加一个周日程表。在“在线找到我”部分下方添加此代码：
<h2>My Schedule</h2>
<table>
<tr>
<th>Day</th>
<th>Activity</th>
</tr>
<tr>
<td>Monday</td>
<td>Web Development Practice</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Project Building</td>
</tr>
<tr>
<td>Friday</td>
<td>Review and Refactor</td>
</tr>
</table>接下来，添加一个联系表单。在你刚刚创建的表格下方添加此代码：
<h2>Contact Me</h2>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"></textarea>
<button type="submit">Send Message</button>
</form>保存文件并查看 Web 8080 标签页。你的个人网页现在已包含日程表和联系表单，内容完整！
恭喜！你已成功使用 HTML 构建了一个完整的个人网页。
在这个实验中，你练习使用了最基础的 HTML 元素来构建文档结构和展示内容。你学会了如何：
<html>、<head> 和 <body> 创建 HTML 页面的基本骨架。<h1>、<h2>）和段落（<p>）来格式化文本。<ul>、<li>）。<img>）并创建超链接（<a>）。<table> 构建数据结构，并使用 <form> 收集用户输入。你现在已经拥有了扎实的 HTML 基础。你可以自由地进一步尝试，修改内容，添加更多页面，或者探索更高级的 HTML 标签。在你的 Web 开发之旅中继续保持出色的表现！
