html创建网页播放器_如何使用HTML创建和链接到其他网站页面-CSDN博客

html创建网页播放器

How To Build a Website With HTML 如何使用HTML构建网站

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

本教程系列将指导您使用HTML(用于在Web浏览器中显示文档的标准标记语言)创建和进一步自定义此网站。不需要任何编码经验，但是如果您希望重新创建演示网站，建议您从本系列的开头开始。

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

在本系列的最后，您应该拥有一个可以部署到云的网站，并且对HTML有了基本的了解。知道如何编写HTML将为学习其他前端Web开发技能(例如CSS和JavaScript)奠定坚实的基础。

When building a website, you may want to have more than one webpage. If you want to add and link to additional pages, you’ll need to first create a new html file in your website project directory. In this tutorial, we’ll learn how to create and link to an additional webpage on your website

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

Our demonstration website includes an “About” webpage. In this tutorial, we’ll walk you through the process of creating and linking to an “About” webpage, but you may change the title and the content of this page to fit your needs.

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

To add a new page to your website, create a new file named about.html and save it in your project directory html-practice. (If you have not been following the tutorial series, you can review instructions for setting up a new html file in our tutorial Setting Up Your HTML Project.)

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

Note: If you decide to choose your own name for the file, make sure to avoid character spaces, special characters (such as !, #, %, or others), and capital letters as these can cause problems later on. You must also include the .html extension.

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

Next, you’ll need to format the file by adding information that will help the browser interpret the file content. To format the file, add following code snippet at the top of the document:

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

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

Make sure to change the highlighted text with a title you want for you page. For an explanation of each of the HTML tags, please visit the earlier tutorial in this series Adding an HTML <head> Element To Your Webpage. Save the file before you continue.

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

Before adding any content to this page, let’s walk through the steps of adding a link to this page on your homepage.

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

First, return to your index.html file and add the following snippet below the subtitle of your site and above the closing </div> tag:

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

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

Change the highlighted file path to the relative file path of your “about.html” file. The relative path refers to the file location relative to the current working directory (as opposed to the absolute path, which refers to the file location relative to the root directory.) If you are using the Visual Studio Code text editor, you can copy the relative file path by CTRL + Left Click (on Macs) or right-clicking' (on Windows) on the file icon and selectingCopy Relative Path.`

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

Note that we have also specified a font-size and color using the style attribute. Save your index.html file and reload it in the browser.

请注意，我们还使用style属性指定了字体大小和颜色。保存index.html文件，然后将其重新加载到浏览器中。

You should now have a link that directs to your about.html web page like this:

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

If you receive an error, make sure that your file is in the same project directory as your index.html file and that there are no errors in your project path.

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

You should now know how to create and link to a new webpage on your website. You can use these same steps to create and link to additional webpages on your website. You can also add content to any new webpage in the same way you are learning to add content to your homepage.

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