如何在 HTML 网站上创建其他网页_html在原有的基础上增加一个页面-CSDN博客

该系列的一部分：如何使用 HTML 构建网站
本教程系列将指导您使用 HTML（用于在 Web 浏览器中显示文档的标准标记语言）创建和进一步自定义该网站。不需要有任何编码经验，但如果您想重新创建演示网站，我们建议您从本系列的开头开始。

在本系列结束时，您应该有一个准备好部署到云的网站，并且基本熟悉 HTML。了解如何编写 HTML 将为学习其他前端 Web 开发技能（例如 CSS 和 JavaScript）奠定坚实的基础。

在构建网站时，您可能希望拥有多个网页。如果您想添加并链接到其他页面，您需要先html在您的网站项目目录中创建一个新文件。在本教程中，我们将学习如何在您的网站上创建并链接到其他网页

我们的演示网站包括一个“关于”网页。在本教程中，我们将引导您完成创建和链接到“关于”网页的过程，但您可以更改此页面的标题和内容以满足您的需要。

要将新页面添加到您的网站，请创建一个名为的新文件about.html并将其保存在您的项目目录中html-practice。（如果您还没有关注教程系列，您可以html在我们的教程设置您的 HTML 项目中查看设置新文件的说明。）

注意：如果您决定为文件选择自己的名称，请确保避免使用字符空格、特殊字符（例如 !、#、% 或其他）和大写字母，因为这些会在以后引起问题。您还必须包括.html扩展名。

接下来，您需要通过添加有助于浏览器解释文件内容的信息来格式化文件。要格式化文件，请在文档顶部添加以下代码片段：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>About</title>
  </head>
</html>

确保使用您想要的页面标题更改突出显示的文本。有关每个 HTML 标记的说明，请访问本系列的早期教程向您的网页添加 HTML <head> 元素。在继续之前保存文件。

在向此页面添加任何内容之前，让我们先完成在主页上添加指向此页面的链接的步骤。

首先，返回到您的index.html文件并在您网站的副标题下方和结束</div>标记上方添加以下代码段：

...
<p style="font-size: 20px; color:#1F9AFE;">
<a href="Webpage_FilePath">About this site</a>
</p>
...

将突出显示的文件路径更改为“about.html”文件的相对文件路径。相对路径是指相对于当前工作目录的文件位置（相对于绝对路径，是指相对于根目录的文件位置。）如果您使用的是 Visual Studio Code 文本编辑器，您可以复制相对文件路径CTRL + Left Click（在 Mac 上）或right-clicking' (on Windows) on the file icon and selecting复制相对路径。`

请注意，我们还使用该style属性指定了字体大小和颜色。保存您的index.html文件并在浏览器中重新加载它。

您现在应该有一个指向您的about.html网页的链接，如下所示：

如果您收到错误，请确保您的文件与您的文件位于同一项目目录中，index.html并且您的项目路径中没有错误。

您现在应该知道如何在您的网站上创建和链接到新网页。您可以使用这些相同的步骤在您的网站上创建并链接到其他网页。您还可以按照学习向主页添加内容的相同方式向任何新网页添加内容。

本文由免费电影（www.kgeyy.com）原创，转载请注明出处。