脑子里有什么？HTML 中的元数据

HTML 文档的 head 是加载页面时不会在 Web 浏览器中显示的部分。它包含诸如页面 <title>、指向 CSS 的链接（如果你选择使用 CSS 设计 HTML 内容的样式）、指向自定义图标的链接以及其他元数据（有关 HTML 的数据，例如作者以及描述该内容的重要关键字）等信息。文档）。Web 浏览器使用 head 中包含的信息来正确呈现 HTML 文档。在本文中，我们将介绍上述所有内容以及更多内容，以便为你使用标记打下良好的基础。

¥The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page <title>, links to CSS (if you choose to style your HTML content with CSS), links to custom favicons, and other metadata (data about the HTML, such as the author, and important keywords that describe the document). Web browsers use information contained in the head to render the HTML document correctly. In this article we'll cover all of the above and more, in order to give you a good basis for working with markup.

先决条件：	熟悉基本的 HTML，如 HTML 入门中所述。
目标：	了解 HTML 标头、其用途、它可以包含的最重要的项目以及它对 HTML 文档的影响。

什么是 HTML 头部？

¥What is the HTML head?

让我们回顾一下简单的我们在上一篇文章中介绍过的 HTML 文档：

¥Let's revisit the simple HTML document we covered in the previous article:

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

HTML 头部是 <head> 元素的内容。与 <body> 元素的内容（在浏览器中加载时显示在页面上）不同，head 的内容不会显示在页面上。相反，负责人的工作是包含有关文档的 metadata。在上面的例子中，头部非常小：

¥The HTML head is the contents of the <head> element. Unlike the contents of the <body> element (which are displayed on the page when loaded in a browser), the head's content is not displayed on the page. Instead, the head's job is to contain metadata about the document. In the above example, the head is quite small:

html

<head>
  <meta charset="utf-8" />
  <title>My test page</title>
</head>

然而，在较大的页面中，头部可能会变得相当大。尝试访问一些你最喜欢的网站并使用开发者工具查看其头部内容。我们在这里的目的不是向你展示如何使用可能放入 head 中的所有内容，而是教你如何使用你想要包含在 head 中的主要元素，并让你熟悉一些。让我们开始吧。

¥In larger pages however, the head can get quite large. Try going to some of your favorite websites and use the developer tools to check out their head contents. Our aim here is not to show you how to use everything that can possibly be put in the head, but rather to teach you how to use the major elements that you'll want to include in the head, and give you some familiarity. Let's get started.

添加标题

¥Adding a title

我们已经看到了 <title> 元素的作用 - 它可以用来向文档添加标题。然而，这可能会与 h1 元素混淆，h1 元素用于向正文内容添加顶层标题 - 有时也称为页面标题。但它们是不同的东西！

¥We've already seen the <title> element in action — this can be used to add a title to the document. This however can get confused with the h1 element, which is used to add a top level heading to your body content — this is also sometimes referred to as the page title. But they are different things!

h1 元素在浏览器中加载时出现在页面上 - 通常每个页面应使用一次，以标记页面内容的标题（故事标题或新闻标题或适合你使用的任何内容。）
<title> 元素是表示整个 HTML 文档标题（而不是文档内容）的元数据。

主动学习：检查一个简单的例子

¥Active learning: Inspecting a simple example

为了开始这种主动学习，我们希望你访问我们的 GitHub 存储库并下载 title-example.html 页面的副本。要做到这一点，要么
1. 将代码从页面复制并粘贴到代码编辑器中的新文本文件中，然后将其保存在合适的位置。
2. 按 GitHub 页面上的 "生的" 按钮，这会导致原始代码出现（可能在新的浏览器选项卡中）。接下来，选择浏览器的“页面另存为...”菜单，然后选择一个合理的位置来保存文件。
现在在浏览器中打开该文件。你应该看到这样的东西：

A web page with 'title' text in the browser's page tab and 'h1' text as a page heading in the document body.

现在 <h1> 内容出现在哪里以及 <title> 内容出现在哪里现在应该是完全明显的了！

¥It should now be completely obvious where the <h1> content appears and where the <title> content appears!

你还应该尝试在代码编辑器中打开代码，编辑这些元素的内容，然后在浏览器中刷新页面。玩得开心吧。

<title> 元素内容还可以以其他方式使用。例如，如果你尝试为页面添加书签（书签 > 将此页面添加为书签或 Firefox 中 URL 栏中的星形图标），你将看到 <title> 内容被填充为建议的书签名称。

¥The <title> element contents are also used in other ways. For example, if you try bookmarking the page (Bookmarks > Bookmark This Page or the star icon in the URL bar in Firefox), you will see the <title> contents filled in as the suggested bookmark name.

A webpage being bookmarked in Firefox. The bookmark name has been automatically filled in with the contents of the 'title' element

<title> 内容也用于搜索结果中，如下所示。

¥The <title> contents are also used in search results, as you'll see below.

元数据：`<meta>` 元素

¥Metadata: the <meta> element

元数据是描述数据的数据，HTML 有一种向文档添加元数据的 "official" 方式 - <meta> 元素。当然，我们在本文中讨论的其他内容也可以被视为元数据。有很多不同类型的 <meta> 元素可以包含在页面的 <head> 中，但我们不会在这个阶段尝试解释所有这些元素，因为这会变得太混乱。相反，我们将解释一些你可能常见的内容，只是为了给你一个想法。

¥Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the <meta> element. Of course, the other stuff we are talking about in this article could also be thought of as metadata too. There are a lot of different types of <meta> elements that can be included in your page's <head>, but we won't try to explain them all at this stage, as it would just get too confusing. Instead, we'll explain a few things that you might commonly see, just to give you an idea.

指定文档的字符编码

¥Specifying your document's character encoding

在我们上面看到的示例中，包含了这一行：

¥In the example we saw above, this line was included:

html

<meta charset="utf-8" />

该元素指定文档的字符编码 - 允许文档使用的字符集。utf-8 是一个通用字符集，几乎包括任何人类语言中的任何字符。这意味着你的网页将能够处理显示任何语言；因此，最好在你创建的每个网页上进行设置！例如，你的页面可以很好地处理英语和日语：

¥This element specifies the document's character encoding — the character set that the document is permitted to use. utf-8 is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it's therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine:

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,

例如，如果你将字符编码设置为 ISO-8859-1（拉丁字母的字符集），你的页面渲染可能会显得一团糟：

¥If you set your character encoding to ISO-8859-1, for example (the character set for the Latin alphabet), your page rendering may appear all messed up:

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

注意：某些浏览器（如 Chrome）会自动修复不正确的编码，因此根据你使用的浏览器，你可能不会看到此问题。无论如何，你仍然应该在页面上设置 utf-8 编码，以避免在其他浏览器中出现任何潜在问题。

¥Note: Some browsers (like Chrome) automatically fix incorrect encodings, so depending on what browser you use, you may not see this problem. You should still set an encoding of utf-8 on your page anyway to avoid any potential problems in other browsers.

主动学习：尝试字符编码

¥Active learning: Experiment with character encoding

要尝试此操作，请重新访问你在上一节中获得的有关 <title>（title-example.html 页面）的简单 HTML 模板，尝试将元字符集值更改为 ISO-8859-1，并将日语添加到你的页面。这是我们使用的代码：

¥To try this out, revisit the simple HTML template you obtained in the previous section on <title> (the title-example.html page), try changing the meta charset value to ISO-8859-1, and add the Japanese to your page. This is the code we used:

html

<p>Japanese example: ご飯が熱い。</p>

添加作者和描述

¥Adding an author and description

许多 <meta> 元素包含 name 和 content 属性：

¥Many <meta> elements include name and content attributes:

name 指定元元素的类型；它包含什么类型的信息。
content 指定实际的元内容。

包含在页面上的两个这样的元元素非常有用，它们定义了页面的作者，并提供了页面的简洁描述。让我们看一个例子：

¥Two such meta elements that are useful to include on your page define the author of the page, and provide a concise description of the page. Let's look at an example:

html

<meta name="author" content="Chris Mills" />
<meta
  name="description"
  content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing websites and applications." />

指定作者有很多好处：如果你对内容有任何疑问并且想要联系他们，那么了解该页面的作者是非常有用的。一些内容管理系统具有自动提取页面作者信息并使其可用于此类目的的功能。

¥Specifying an author is beneficial in many ways: it is useful to be able to understand who wrote the page, if you have any questions about the content and you would like to contact them. Some content management systems have facilities to automatically extract page author information and make it available for such purposes.

指定包含与页面内容相关的关键字的描述很有用，因为它有可能使你的页面在搜索引擎中执行的相关搜索中显示得更高（此类活动称为搜索引擎优化或 SEO。）

¥Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed Search Engine Optimization, or SEO.)

主动学习：描述在搜索引擎中的使用

¥Active learning: The description's use in search engines

该描述也用于搜索引擎结果页面。让我们通过一个练习来探索这个问题

¥The description is also used on search engine result pages. Let's go through an exercise to explore this

前往 Mozilla 开发者网络的首页。
查看页面源（右键单击页面，从上下文菜单中选择“查看页面源”。）

找到描述元标记。它看起来像这样（尽管它可能会随着时间的推移而改变）：

html

<meta
  name="description"
  content="The MDN Web Docs site
  provides information about Open Web technologies
  including HTML, CSS, and APIs for both websites and
  progressive web apps." />

现在在你最喜欢的搜索引擎（我们使用的是 Google）中搜索 "MDN 网络文档"。你会注意到搜索结果中使用的描述 <meta> 和 <title> 元素内容 — 绝对值得拥有！

注意：在 Google 中，你将看到主主页链接下方列出的 MDN Web Docs 的一些相关子页面 — 这些称为附加链接，可在 Google 的网站管理员工具中配置 — 这是一种使你的网站在 Google 搜索引擎中获得更好搜索结果的方法。

¥Note: In Google, you will see some relevant subpages of MDN Web Docs listed below the main homepage link — these are called sitelinks, and are configurable in Google's webmaster tools — a way to make your site's search results better in the Google search engine.

注意：许多 <meta> 功能已不再使用。例如，关键字 <meta> 元素 (<meta name="keywords" content="fill, in, your, keywords, here">) — 应该为搜索引擎提供关键字以确定该页面与不同搜索词的相关性 — 会被搜索引擎忽略，因为垃圾邮件发送者只是用数百个关键字填充关键字列表，有偏差的结果。

¥Note: Many <meta> features just aren't used anymore. For example, the keyword <meta> element (<meta name="keywords" content="fill, in, your, keywords, here">) — which is supposed to provide keywords for search engines to determine the relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.

其他类型的元数据

¥Other types of metadata

当你浏览网络时，你还会发现其他类型的元数据。你在网站上看到的许多功能都是专有的，旨在为某些网站（例如社交网站）提供他们可以使用的特定信息。

¥As you travel around the web, you'll find other types of metadata, too. Many of the features you'll see on websites are proprietary creations designed to provide certain sites (such as social networking sites) with specific information they can use.

例如，开放图数据是 Facebook 发明的元数据协议，旨在为网站提供更丰富的元数据。在 MDN Web 文档源代码中，你会发现：

¥For example, Open Graph Data is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN Web Docs sourcecode, you'll find this:

html

<meta
  property="og:image"
  content="https://web.nodejs.cn/mdn-social-share.png" />
<meta
  property="og:description"
  content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both websites
and HTML Apps." />
<meta property="og:title" content="Mozilla Developer Network" />

这样做的效果之一是，当你链接到 Facebook 上的 MDN Web 文档时，该链接会与图片和描述一起显示：为用户带来更丰富的体验。

¥One effect of this is that when you link to MDN Web Docs on Facebook, the link appears along with an image and description: a richer experience for users.

将自定义图标添加到你的网站

¥Adding custom icons to your site

为了进一步丰富你的网站设计，你可以在元数据中添加对自定义图标的引用，这些图标将显示在某些上下文中。其中最常用的是 favicon（"收藏夹图标" 的缩写，指的是它在浏览器中的 "favorites" 或 "bookmarks" 列表中的使用）。

¥To further enrich your site design, you can add references to custom icons in your metadata, and these will be displayed in certain contexts. The most commonly used of these is the favicon (short for "favorites icon", referring to its use in the "favorites" or "bookmarks" lists in browsers).

这个不起眼的图标已经存在很多年了。这是该类型的第一个图标：在多个地方使用的 16 像素方形图标。你可能会看到（取决于浏览器）包含每个打开页面的浏览器选项卡中以及书签面板中已添加书签的页面旁边显示的图标。

¥The humble favicon has been around for many years. It is the first icon of this type: a 16-pixel square icon used in multiple places. You may see (depending on the browser) favicons displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel.

可以通过以下方式将网站图标添加到你的页面：

¥A favicon can be added to your page by:

将其保存在与站点索引页相同的目录中，以 .ico 格式保存（大多数还支持更常见格式的图标，例如 .gif 或 .png）

将以下行添加到 HTML 的 <head> 块中以引用它：

html

<link rel="icon" href="favicon.ico" type="image/x-icon" />

以下是书签面板中的收藏夹图标的示例：

¥Here is an example of a favicon in a bookmarks panel:

如今还有许多其他图标类型需要考虑。例如，你可以在 MDN Web Docs 主页的源代码中找到以下内容：

¥There are lots of other icon types to consider these days as well. For example, you'll find this in the source code of the MDN Web Docs homepage:

html

<!-- third-generation iPad with high-resolution Retina display: -->
<link
  rel="apple-touch-icon"
  sizes="144x144"
  href="https://web.nodejs.cn/static/img/favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
  rel="apple-touch-icon"
  sizes="114x114"
  href="https://web.nodejs.cn/static/img/favicon114.png" />
<!-- first- and second-generation iPad: -->
<link
  rel="apple-touch-icon"
  sizes="72x72"
  href="https://web.nodejs.cn/static/img/favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link
  rel="apple-touch-icon"
  href="https://web.nodejs.cn/static/img/favicon57.png" />
<!-- basic favicon -->
<link
  rel="icon"
  href="https://web.nodejs.cn/static/img/favicon32.png" />

这些评论解释了每个图标的用途 - 这些元素涵盖了诸如提供漂亮的高分辨率图标以供在将网站保存到 iPad 主屏幕时使用之类的内容。

¥The comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an iPad's home screen.

现在不要太担心实现所有这些类型的图标 - 这是一个相当高级的功能，你不需要了解这一点来完成本课程。这里的主要目的是让你知道这些东西是什么，以防你在浏览其他网站的源代码时遇到它们。

¥Don't worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won't be expected to have knowledge of this to progress through the course. The main purpose here is to let you know what such things are, in case you come across them while browsing other websites' source code.

注意：如果你的网站使用内容安全策略 (CSP) 来增强其安全性，则该策略将应用于网站图标。如果你遇到图标未加载的问题，请验证 Content-Security-Policy 标头的 img-src 指令是否不会阻止对其进行访问。

¥Note: If your site uses a Content Security Policy (CSP) to enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not loading, verify that the Content-Security-Policy header's img-src directive is not preventing access to it.

将 CSS 和 JavaScript 应用于 HTML

¥Applying CSS and JavaScript to HTML

几乎所有你在现代使用的网站都会采用 CSS 来让它们看起来很酷，并采用 JavaScript 来支持交互功能，例如视频播放器、地图、游戏等。这些最常分别应用于使用 <link> 元素和 <script> 元素的网页。

¥Just about all websites you'll use in the modern day will employ CSS to make them look cool, and JavaScript to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the <link> element and the <script> element, respectively.

<link> 元素应该始终位于文档的头部。这需要两个属性，rel="stylesheet"（指示它是文档的样式表）和 href（包含样式表文件的路径）：
html
```
<link rel="stylesheet" href="my-css-file.css" />
```
<script> 元素也应该进入头部，并且应该包含一个 src 属性，其中包含要加载的 JavaScript 的路径，以及 defer，它基本上指示浏览器在页面完成解析 HTML 后加载 JavaScript。这很有用，因为它可以确保在 JavaScript 运行之前加载所有 HTML，这样你就不会因为 JavaScript 尝试访问页面上尚不存在的 HTML 元素而出现错误。实际上有多种方法可以处理在页面上加载 JavaScript，但这是对于现代浏览器来说最可靠的一种（对于其他浏览器，请阅读脚本加载策略）。
html
```
<script src="my-js-file.js" defer></script>
```
注意：<script> 元素可能看起来像 void element，但事实并非如此，因此需要一个结束标记。你还可以选择将脚本放入 <script> 元素内，而不是指向外部脚本文件。

¥Note: The <script> element may look like a void element, but it's not, and so needs a closing tag. Instead of pointing to an external script file, you can also choose to put your script inside the <script> element.

主动学习：将 CSS 和 JavaScript 应用于页面

¥Active learning: applying CSS and JavaScript to a page

要开始这种主动学习，请获取 meta-example.html、script.js 和 style.css 文件的副本，并将它们保存在本地计算机的同一目录中。确保它们以正确的名称和文件扩展名保存。
在浏览器和文本编辑器中打开 HTML 文件。
按照上面给出的信息，将 <link> 和 <script> 元素添加到 HTML，以便将 CSS 和 JavaScript 应用到 HTML。

如果操作正确，当你保存 HTML 并刷新浏览器时，你应该能够看到情况发生了变化：

¥If done correctly, when you save your HTML and refresh your browser you should be able to see that things have changed:

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

JavaScript 已向页面添加了一个空列表。现在，当你单击列表之外的任意位置时，将弹出一个对话框，要求你为新列表项输入一些文本。当你按下“确定”按钮时，一个新的列表项将添加到包含该文本的列表中。当你单击现有列表项时，将弹出一个对话框，允许你更改该项目的文本。
CSS 使背景变绿，文本变大。它还对 JavaScript 添加到页面的一些内容进行了样式设置（带有黑色边框的红色条是 CSS 添加到 JS 生成列表中的样式。）

注意：如果你在此练习中遇到困难并且无法应用 CSS/JS，请尝试查看我们的 css-and-js.html 示例页面。

¥Note: If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our css-and-js.html example page.

设置文档的主要语言

¥Setting the primary language of the document

最后，值得一提的是，你可以（并且确实应该）设置页面的语言。这可以通过将语言属性添加到开始 HTML 标记来完成（如 meta-example.html 中所示，如下所示。）

¥Finally, it's worth mentioning that you can (and really should) set the language of your page. This can be done by adding the lang attribute to the opening HTML tag (as seen in the meta-example.html and shown below.)

html

<html lang="en-US">
  …
</html>

这在很多方面都很有用。如果设置了 HTML 文档的语言（例如，允许其在特定于语言的结果中正确显示），搜索引擎将更有效地对你的 HTML 文档建立索引，并且对于使用屏幕阅读器（例如，单词 "six" 存在于法语和英语中，但发音不同。）

¥This is useful in many ways. Your HTML document will be indexed more effectively by search engines if its language is set (allowing it to appear correctly in language-specific results, for example), and it is useful to people with visual impairments using screen readers (for example, the word "six" exists in both French and English, but is pronounced differently.)

你还可以将文档的各个部分设置为不同的语言。例如，我们可以将日语部分设置为日语，如下所示：

¥You can also set subsections of your document to be recognized as different languages. For example, we could set our Japanese language section to be recognized as Japanese, like so:

html

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

这些代码由 ISO 639-1 标准定义。你可以在 HTML 和 XML 中的语言标签中找到有关它们的更多信息。

¥These codes are defined by the ISO 639-1 standard. You can find more about them in Language tags in HTML and XML.

概括

¥Summary

这标志着我们对 HTML 头的快速浏览的结束 - 在这里你还可以做更多的事情，但是在这个阶段，详尽的浏览会很无聊且令人困惑，我们只是想让你了解最常见的事情现在你会在那里找到！在下一篇文章中，我们将讨论 HTML 文本基础知识。

¥That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article, we'll be looking at HTML text fundamentals.