毕业作品——构建你的第一个网站！

到这里，你已经完成了HTML学习的所有核心课程！现在，你不再是一个旁观者，而是一个真正的“建筑师”。是时候将所有学到的知识融会贯通，建造你的第一个完整的多页面网站了。理论学习固然重要，但没有什么比亲手创造一个完整的项目更能巩固知识、带来成就感。

项目目标：一个简单的个人作品集网站

我们将构建一个包含三个页面的个人作品集网站。它将包括：

index.html: 网站主页，展示欢迎信息和你的照片。
about.html: 关于我页面，介绍你的背景和技能。
contact.html: 联系我页面，放置一个联系表单。

第一步：规划你的“施工现场”

首先，在你的电脑上创建一个新的项目文件夹，就叫 my-portfolio 吧。然后，在 my-portfolio 内部，创建如下的目录结构：

|
my-portfolio/
├── index.html
├── about.html
├── contact.html
└── images/

创建三个HTML文件：index.html, about.html, contact.html。
创建一个名为 images 的子文件夹，用来存放网站图片。你可以找一张自己的照片或者喜欢的头像，命名为 profile.jpg 并放入该文件夹。

第二步：建造主页 (`index.html`)

这是访客打开你的网站时看到的第一个页面。它需要一个清晰的导航，链接到其他页面。

将以下代码完整地复制到你的 index.html 文件中，然后尝试进行修改成你想要的样子：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王小明 | 个人主页</title>
</head>
<body>
 
  <header>
    <h1>欢迎来到我的个人网站</h1>
  </header>
 
  <nav>
    <a href="index.html">主页</a> |
    <a href="about.html">关于我</a> |
    <a href="contact.html">联系我</a>
  </nav>
 
  <hr>
 
  <main>
    <h2>我是王小明，一位未来的Web开发者</h2>
    <p>我对用代码创造美妙的数字体验充满热情。</p>
    <img src="images/profile.jpg" alt="王小明的头像" width="200">
  </main>
 
  <hr>
 
  <footer>
    <p>&copy; 2023 王小明. 保留所有权利。</p>
  </footer>
 
</body>
</html>

我们使用了语义化的<header>, <nav>, <main>, <footer>。
<nav>部分包含了到所有三个页面的链接。注意，我们使用的是相对路径。
<img>标签的src指向了images文件夹下的profile.jpg。请确保你的图片路径正确！

第三步：撰写关于页面 (`about.html`)

这个页面用来详细介绍你自己。注意看，它的<header>, <nav>, <footer>部分和主页是完全一样的。这种一致性是专业网站的重要特征。

将以下代码完整地复制到你的 about.html 文件中，然后尝试进行修改成你想要的样子：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关于我 | 王小明</title>
</head>
<body

第四步：创建联系页面 (`contact.html`)

最后，我们来创建一个包含表单的联系页面，让别人可以给你“留言”。

将以下代码完整地复制到你的 contact.html 文件中，然后尝试进行修改成你想要的样子：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>联系我 | 王小明</title>
</head>
<body

见证你的作品！

现在，用浏览器打开你的index.html文件。你看到了什么？一个可以工作的、由你亲手构建的网站！你可以点击导航栏在三个页面之间自由跳转。主页有你的欢迎词和照片，关于页面有你的技能清单，联系页面有一个功能完备的表单。

你可以为自己简单的鼓个掌了！ 你已经将零散的HTML知识，凝聚成了一个具体、完整的项目。这是你开发之旅上的一个重要里程碑。

当然，现在它看起来可能还很朴素。但你别担心，你已经搭建了坚实的骨架，任何你在未来看到的复杂的网页，在原理上，它脱离不了我们所学习的骨架。

挑战自我

如果你完成了上面的所有步骤，并且渴望更多挑战，可以尝试在现有项目的基础上完成以下任务，来检验你的学习成果：

添加新页面: 创建一个 portfolio.html 页面，用来展示你的“项目”。在页面上至少放置两个虚构的项目，每个项目包含一个标题、一张图片和一段简短的描述。别忘了在所有页面的导航栏中都添加指向这个新页面的链接！
优化“关于我”页面: 回到 about.html，尝试将“我的技能”部分从无序列表<ul>改造为描述列表<dl>。使用<dt>来放置技能名称（如HTML），使用<dd>来放置熟练度描述（如“熟练”）。
添加邮件链接: 在所有页面的<footer>（页脚）中，添加一个mailto:链接，指向你自己的邮箱地址。
设置网站图标: 寻找一个你喜欢的 .png 或 .ico 图标文件，将它命名为 favicon.png 并放入 images 文件夹。然后，修改所有HTML文件，在<head>部分添加正确的<link>标签来引用这个图标。