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

深碍√TFBOYSˉ_ 2022-11-28 15:26 133阅读 0赞

html创建网页播放器

**[How To Build a Website With HTML][] [如何使用HTML构建网站][How To Build a Website With 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][How To Build a Website With HTML] if you wish to recreate the demonstration website.

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

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.

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

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项目”中][Setting Up Your HTML Project]查看有关设置新`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][Adding an HTML _head_ Element To Your Webpage]. Save the file before you continue.

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

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 selecting`Copy 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.

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

> 翻译自: [https://www.digitalocean.com/community/tutorials/how-to-create-and-link-to-additional-website-pages-with-html][https_www.digitalocean.com_community_tutorials_how-to-create-and-link-to-additional-website-pages-with-html]

html创建网页播放器

[How To Build a Website With HTML]: https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html
[this website]: http://html.sammy-codes.com/
[demonstration website]: https://html.sammy-codes.com/
[Setting Up Your HTML Project]: https://www.digitalocean.com/community/tutorials/setting-up-your-html-project
[Adding an HTML _head_ Element To Your Webpage]: https://www.digitalocean.com/community/tutorials/adding-an-html-head-element-to-your-webpage
[https_www.digitalocean.com_community_tutorials_how-to-create-and-link-to-additional-website-pages-with-html]: https://www.digitalocean.com/community/tutorials/how-to-create-and-link-to-additional-website-pages-with-html