HTML 教程 / 创建一个多页面小网站

一个小型的多页面网站结合了文档结构、语义区域、链接和表单。在本项目中，您将在同一文件夹中创建首页、关于我们和联系页面，在它们之间导航并检查结果。HTML 本身无法接收或存储联系人消息，因此这里的表单只是输入演示，而非真正可用的联系服务。

准备文件

创建一个新文件夹，并将这三个简单的 UTF-8 文本文件保存其中。它们的文件名必须与菜单中 href 的值完全一致。首先比较从 创建链接：路径、页内跳转与电子邮件 中的文件位置到文件的相对路径如何解析。

small-site/
  index.html
  about.html
  contact.html

确保编辑器没有添加其他扩展，例如 .txt。将三个文件保存在一起可以让 href="about.html" 使用相对路径找到“关于我们”页面。如果以后将文件移动到其他文件夹，请更新相应的链接。首先完成纯文本版本；然后可以添加允许使用的图片，并提供相应的替代文本。

创建首页

将以下完整文档保存为 index.html。在每一页上使用相同的三个菜单目标。header、nav 和 main 的职责，可参照使用语义元素组织页面中的说明。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>首页 | 小花园</title>
  <meta name="description" content="小花园练习页面的首页，包含介绍和一个联系表单练习的链接。">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="主导航">
      <a href="index.html" aria-current="page">首页</a>
      <a href="about.html">关于我们</a>
      <a href="contact.html">联系我们</a>
    </nav>
  </header>
  <main>
    <h1>小花园</h1>
    <p>为开始种植植物的人提供的小指南。</p>
  </main>
  <footer><p>小花园练习页面</p></footer>
</body>
</html>

打开 index.html 应显示一个菜单和标题“小花园”。在您在同一文件夹中创建这些文件之前，‘关于我们’和‘联系我们’链接不会起作用。这里显示的 h1 属于示例页面，不属于本教程。

创建‘关于我们’和‘联系我们’页面

将以下完整文档保存为 about.html。它保持菜单的相同目标页面，同时为“关于我们”分配一个独立的标题、描述和当前菜单状态。在检查 GET 值与接收消息之间的区分，遵循 表单结构和 GET 与 POST 中请求说明的解释。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>关于我们 | 小花园</title>
  <meta name="description" content="小花园练习页面的介绍，适合开始种植植物的人。">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="主导航">
      <a href="index.html">首页</a>
      <a href="about.html" aria-current="page">关于我们</a>
      <a href="contact.html">联系我们</a>
    </nav>
  </header>
  <main>
    <h1>关于我们</h1>
    <p>小花园是一个为刚开始种植植物的人准备的练习页面。</p>
  </main>
  <footer><p>小花园练习页面</p></footer>
</body>
</html>

将以下完整文档保存为 contact.html。练习表单将输入通过 GET 提交到当前文档的 URL，并且不发送真实消息。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>联系我们 | 小花园</title>
  <meta name="description" content="练习输入姓名和测试消息并确认，而不发送真实的联系请求。">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="主导航">
      <a href="index.html">首页</a>
      <a href="about.html">关于我们</a>
      <a href="contact.html" aria-current="page">联系我们</a>
    </nav>
  </header>
  <main>
    <h1>联系表单练习</h1>
    <p>此示例不会发送消息。仅使用测试文本。</p>
    <form method="get">
      <p><label for="visitor-name">姓名</label>
        <input id="visitor-name" name="name" required></p>
      <p><label for="message">消息</label>
        <textarea id="message" name="message" rows="4" required></textarea></p>
      <button type="submit">检查输入的值</button>
    </form>
  </main>
  <footer><p>小花园练习页面</p></footer>
</body>
</html>

每个区块都是一个完整的文档，因此应将其保存为整个文件，而不是在现有副本中放置另一个 html 或 main 元素。保持相同的菜单目标，但仅将 aria-current="page" 设置为表示该文档的链接。

“检查输入的值”不会向任何人发送消息。浏览器会检查必填字段，并使用 GET 将输入内容提交到当前文档的 URL。只用占位符文本进行测试，因为提交的值可能会出现在 URL 中。真正的联系服务需要服务器端处理程序、隐私措施、防垃圾邮件控制以及明确的成功或错误信息。

使用此表格来比较完成的屏幕。当前链接会以粗体显示，而 aria-current 会在不依赖这种视觉表现的情况下传递其状态。

检查成功标准，并逐步扩展网站

在每次添加扩展之前，先完成基础版本：在“关于我们”部分添加一个实用列表，添加带有适当替代文本的图片，或在 details 元素中添加可选信息。在每次添加后重复检查导航、语法和键盘操作，以便每一个新问题都只归因于一次更改。

在更新共享菜单时，请更新所有三个副本，但在每个副本中将 aria-current 设置为相应的链接。部署后再次测试相对路径：文件名的大小写和部署目录可能与本地环境不同。

检查完成的网站

1. 打开index.html，确认每个菜单链接都打开正确的文件。
2. 从“关于我们”和“联系我们”导航到其他两个页面；不仅测试首页菜单。
3. 确保每个可见的标签标题和h1描述该页面。
4. 使用Tab访问每个链接和每个联系表单控件。
5. 尝试提交空字段，然后输入测试值，同时观察URL。
6. 使用Nu HTML Checker检查每个文件，修正错误后重新检查。

如果链接失败，请首先检查文件名和相对路径。如果您更改了一个共享菜单，请更新三个副本。当网站增长时，保持重复标记的一致性变得很重要。在此练习中，期望一个不会发送实际消息的表单；目标是创建并检查HTML界面。请按查找错误并验证 HTML 文档中的方法，分别记录语法检查结果与页面的实际行为。