html 网页元素位置_如何添加HTML 网页元素

布满荆棘的人生 2022-11-28 15:23 154阅读 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)奠定坚实的基础。

This tutorial will walk you through the steps of adding a `<head>` element to your webpage, which creates a section for us to include machine-readable information *about* our web document. This information is primarily used by browsers and search engines to interpret the content of the page. Content placed inside the `<head>` element will not be visible on the web page.

本教程将引导您完成向网页添加`<head>`元素的步骤，该步骤为我们创建了一个部分，以包含*有关* Web文档的机器可读信息。 浏览器和搜索引擎主要使用此信息来解释页面的内容。 放置在`<head>`元素内的内容在网页上将不可见。

**Note**:The HTML `<head>` element is a *semantic* element in that it tells the browser and the developer the *meaning* or *purpose* of its content. Semantic elements are used to aid human readability of an HTML document, provide the browser further information for interpreting the content, improve site accessibility (screen readers use semantic tags), and can assist with SEO positioning.

**注意** ：HTML `<head>`元素是一个*语义*元素，它告诉浏览器和开发人员其内容的*含义*或*目的* 。 语义元素用于提高HTML文档的可读性，为浏览器提供进一步的信息以解释内容，提高网站的可访问性(屏幕阅读器使用语义标签)，并可以帮助SEO定位。

Add the opening and closing `<head>` tags inside of the `<html>` tags. Next, add two additional lines of HTML code inside the `<head>` tags like this:

在`<html>`标记内添加开始和结束`<head>` `<html>`标记。 接下来，在`<head>`标记内添加另外两行HTML代码，如下所示：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title> Sammy’s First Website </title>
    </head>
    </html>

Note that you have nested a variety of HTML elements inside one another. The `<title>` and `<meta>` elements are nested inside the <head> element, and the `<head>` element is nested inside the `<html>` element. We will nest elements frequently as the tutorial proceeds.

请注意，您已经相互嵌套了许多HTML元素。 `<title>`和`<meta>`元素嵌套在<head>元素内，而`<head>`元素嵌套在`<html>`元素内。 随着教程的进行，我们将经常嵌套元素。

Let’s now pause briefly to understand the purpose of the code we’ve just added. The line of code after the opening `<head>` tag—`<meta charset="utf-8">`—specifies the document’s character set to UTF-8, a unicode format that supports a majority of characters from a wide variety of written languages.

现在让我们暂时停顿一下，以了解我们刚刚添加的代码的用途。 `<head>`标记后的代码行`<meta charset="utf-8">` –将文档的字符集指定为UTF-8，这是一种Unicode代码格式，支持来自多种书面语言的大多数字符。

The next line of code sets the HTML document’s title using the `<title>` element. The content you insert into this element will be displayed on the browser tab and as the website’s title in search results, but it will not show up on the web page itself. Make sure to replace “Sammy’s First Website” with your name or the name of the website you’re building.

下一行代码使用`<title>`元素设置HTML文档的标题。 您插入到此元素中的内容将显示在浏览器选项卡上，并在搜索结果中显示为网站的标题，但不会显示在网页本身上。 确保用您的姓名或您所建网站的名称替换“ Sammy的第一个网站”。

Though developers often add additional information in the `<head>` section, we now have sufficient information for creating a basic HTML webpage. Save your file before moving onto the next section. If you try loading the file in your browser, you should receive a blank page.

尽管开发人员经常在`<head>`部分中添加其他信息，但是我们现在有足够的信息来创建基本HTML网页。 在继续下一部分之前，请保存文件。 如果尝试在浏览器中加载文件，应该会收到一个空白页。

You should now know the purpose of HTML <head> elements and how to add one to an HTML file.

现在，您应该知道HTML <head>元素的用途以及如何将其添加到HTML文件中。

> 翻译自: [https://www.digitalocean.com/community/tutorials/adding-an-html-head-element-to-your-webpage][https_www.digitalocean.com_community_tutorials_adding-an-html-head-element-to-your-webpage]

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/
[https_www.digitalocean.com_community_tutorials_adding-an-html-head-element-to-your-webpage]: https://www.digitalocean.com/community/tutorials/adding-an-html-head-element-to-your-webpage