在构建网站时,您可能希望拥有多个网页。如果您想添加并链接到其他页面,您需要先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
并且您的项目路径中没有错误。
您现在应该知道如何在您的网站上创建和链接到新网页。您可以使用这些相同的步骤在您的网站上创建并链接到其他网页。您还可以按照学习向主页添加内容的相同方式向任何新网页添加内容。