HTML 个人网页制作：从零开始构建你的第一个网页

介绍

欢迎来到 HTML 个人网页项目！在这个实验中，你将使用 Web 的基本构建块：HTML，从头开始构建一个完整、单页的网站。这个实践项目专为初学者设计，将指导你掌握创建结构化、内容丰富的网页所需的关键标签和概念。

你将学习如何：

定义 HTML 文档的基本结构。
使用标题和段落来格式化文本。
使用列表来组织信息。
嵌入图片并创建超链接。
使用表格来构建数据结构并创建一个简单的联系表单。

Web 服务器和基础样式（CSS）已为你预先配置好。你的主要重点将是编写干净、语义化的 HTML。你可以在实验环境中切换到 Web 8080 标签页，实时预览你的工作成果。让我们开始吧！

使用 head 和 body 设置文档结构

在这个步骤中，你将设置 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"> 内的注释 ，并用以下代码替换它：

<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 标签页。你现在将在页面上看到你的名字和个人简介。

h1 and p tag

插入列表以展示技能或兴趣

在这个步骤中，你将使用列表来组织信息，例如你的技能或兴趣。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 标签页。你的个人网页现在已包含日程表和联系表单，内容完整！

table and form tag

总结

恭喜！你已成功使用 HTML 构建了一个完整的个人网页。

在这个实验中，你练习使用了最基础的 HTML 元素来构建文档结构和展示内容。你学会了如何：

使用 <html>、<head> 和 <body> 创建 HTML 页面的基本骨架。
使用标题（<h1>、<h2>）和段落（<p>）来格式化文本。
将项目组织成无序列表（<ul>、<li>）。
嵌入图片（<img>）并创建超链接（<a>）。
使用 <table> 构建数据结构，并使用 <form> 收集用户输入。

你现在已经拥有了扎实的 HTML 基础。你可以自由地进一步尝试，修改内容，添加更多页面，或者探索更高级的 HTML 标签。在你的 Web 开发之旅中继续保持出色的表现！