网页元数据（head 部分有什么？）
HTML 文档的head部分在页面加载时不会显示在 Web 浏览器中。它包含元数据信息，例如页面<title>、CSS链接（如果你选择使用 CSS 样式化 HTML 内容）、自定义网站图标链接以及其他元数据（关于 HTML 的数据，例如作者和描述文档的重要关键词）。
Web 浏览器使用head中包含的信息来正确渲染 HTML 文档。在本文中，我们将涵盖上述所有内容以及更多内容，以便为您使用标记提供一个良好的基础。
| 预备知识 | 熟悉基本的 HTML 知识，如前一课所述。 |
|---|---|
| 学习成果 |
|
HTML 的 head 部分是什么？
让我们回顾一下上一篇文章中介绍的简单 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 部分是<head>元素的内容。与<body>元素的内容（在浏览器中加载时显示在页面上）不同，head 的内容不会显示在页面上。相反，head 的作用是包含文档的元数据。在上面的例子中，head 相当小。
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
然而，在大型页面中，head 部分可能会变得相当大。尝试访问一些你喜欢的网站，并使用开发者工具查看它们的 head 内容。我们的目标不是向你展示如何使用 head 中可能包含的所有内容，而是教你如何使用你想要包含在 head 中的主要元素，并让你熟悉它们。让我们开始吧。
添加标题
我们已经看到了<title>元素的实际作用——它可以用来为文档添加标题。然而，这可能会与h1元素混淆，h1 元素用于为你的正文内容添加一个顶级标题——这有时也被称为页面标题。但它们是不同的东西！
检查示例
-
在此练习中，我们希望你首先访问我们的 GitHub 仓库并下载title-example.html 页面的副本。为此，你可以选择以下方式：
- 复制并粘贴页面中的代码到你的代码编辑器中的一个新文本文件，然后将其保存到合适的位置。
- 点击 GitHub 页面上的“Raw”按钮，这将显示原始代码（可能在一个新的浏览器标签页中）。接下来，选择你的浏览器的“另存为…”菜单，并选择一个合适的位置来保存文件。
-
现在在你的浏览器中打开该文件。你应该会看到类似这样的内容：
现在应该很清楚
<h1>内容在哪里显示，<title>内容在哪里显示了！ -
你还应该尝试在代码编辑器中打开代码，编辑这些元素的内容，然后在浏览器中刷新页面。好好玩一玩。
<title>元素的内容也以其他方式使用。例如，如果你尝试收藏该页面（“书签”>“收藏此页”或 Firefox URL 栏中的星形图标），你将看到<title>内容作为建议的书签名称填充。
<title>内容也用于搜索结果中，如下所示。
元数据：<meta>元素
元数据是描述数据的数据，HTML 有一种“官方”方式将元数据添加到文档中——<meta>元素。当然，我们在本文中讨论的其他内容也可以被认为是元数据。你的页面<head>中可以包含许多不同类型的<meta>元素，但我们目前不会尝试全部解释，因为那会变得太令人困惑。相反，我们将解释一些你可能会经常看到的内容，只是为了给你一个概念。
指定文档的字符编码
在我们上面看到的例子中，包含了这一行：
<meta charset="utf-8" />
此元素指定了文档的字符编码——文档允许使用的字符集。utf-8是一个通用字符集，包含了几乎所有人类语言的字符。这意味着你的网页将能够处理显示任何语言；因此，在你创建的每个网页上都设置这个是一个好主意！例如，你的页面可以很好地处理英语和日语：
例如，如果你将字符编码设置为ISO-8859-1（拉丁字母的字符集），你的页面渲染可能会出现混乱：
注意：某些浏览器（如 Chrome）会自动修复不正确的编码，因此根据你使用的浏览器，你可能不会看到此问题。无论如何，你都应该在页面上设置utf-8编码，以避免在其他浏览器中出现任何潜在问题。
字符编码实验
为了尝试这个，请重新访问你在上一节关于<title>中获得的简单 HTML 模板（title-example.html 页面），尝试将 meta charset 值更改为ISO-8859-1，并将日语添加到你的页面。这是我们使用的代码：
<p>Japanese example: ご飯が熱い。</p>
添加作者和描述
许多<meta>元素包含name和content属性：
name指定了 meta 元素的类型；它包含什么类型的信息。content指定实际的元内容。
你的页面上包含的两个有用的 meta 元素是定义页面作者和提供页面简洁描述的元素。我们来看一个例子：
<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." />
指定作者在很多方面都有好处：如果你对内容有任何疑问并希望联系作者，能够了解是谁撰写了页面是很有用的。一些内容管理系统具有自动提取页面作者信息并将其用于此类目的的功能。
指定包含与你的页面内容相关的关键词的描述很有用，因为它有可能使你的页面在搜索引擎中执行的相关搜索中排名更高（此类活动被称为搜索引擎优化，或SEO）。
探索描述在搜索引擎中的应用
描述也用于搜索引擎结果页面。我们来做一个练习来探讨一下：
-
查看页面源代码（右键单击页面，从上下文菜单中选择“查看页面源代码”）。
-
找到描述元标签。它看起来会像这样（尽管它可能会随时间变化）：
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." /> -
现在在您最喜欢的搜索引擎中搜索“MDN Web Docs”（我们使用的是 Google）。您会注意到搜索结果中使用了描述
<meta>和<title>元素内容——绝对值得拥有！
注意：在 Google 中，你会在主页链接下方看到一些相关的 MDN Web Docs 子页面——这些被称为站点链接，并且可以在Google 的站长工具中配置——这是一种在 Google 搜索引擎中改善你的网站搜索结果的方法。
注意：许多<meta>功能现在已不再使用。例如，关键词<meta>元素 (<meta name="keywords" content="fill, in, your, keywords, here">)——它应该为搜索引擎提供关键词，以确定该页面与不同搜索词的相关性——已被搜索引擎忽略，因为垃圾邮件发送者只是用数百个关键词填充关键词列表，从而影响了搜索结果。
其他类型的元数据
在网上浏览时，你还会发现其他类型的元数据。你在网站上看到的许多功能都是专有创建的，旨在为某些网站（例如社交网络网站）提供他们可以使用的特定信息。
例如，Open Graph Data是 Facebook 发明的一种元数据协议，旨在为网站提供更丰富的元数据。在 MDN Web Docs 的源代码中，你会发现：
<meta
property="og:image"
content="https://mdn.org.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 Docs 时，链接会与图片和描述一起显示：为用户带来更丰富的体验。
为你的网站添加自定义图标
为了进一步丰富你的网站设计，你可以在元数据中添加对自定义图标的引用，这些图标将在特定上下文中显示。其中最常用的是 favicon（“收藏夹图标”的缩写，指其在浏览器“收藏夹”或“书签”列表中的使用）。
不起眼的 favicon 已经存在多年了。它是这种类型图标中的第一个：一个 16 像素的方形图标，用于多个位置。你可能会看到（取决于浏览器）在包含每个打开页面的浏览器选项卡中以及书签面板中的书签页面旁边显示 favicon。
可以通过以下方式将 favicon 添加到你的页面：
-
将其保存到与站点索引页相同的目录中，以
.ico格式保存（大多数也支持更常见的格式如.gif或.png的 favicon）。 -
在你的 HTML 的
<head>块中添加以下行来引用它：html<link rel="icon" href="favicon.ico" type="image/x-icon" />
这是一个书签面板中 favicon 的示例：
您可能还需要针对不同环境使用不同的图标。例如，您会在 MDN Web Docs 主页的源代码中找到这些内容：
<link rel="icon" href="/favicon-48x48.[some hex hash].png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.[some hex hash].png" />
这是一种让网站在保存到 Apple 设备主屏幕时显示图标的方法。你甚至可能希望为不同的设备提供不同的图标，以确保图标在所有设备上都看起来不错。例如：
<!-- iPad Pro with high-resolution Retina display: -->
<link
rel="apple-touch-icon"
sizes="167x167"
href="/apple-touch-icon-167x167.png" />
<!-- 3x resolution iPhone: -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon-180x180.png" />
<!-- non-Retina iPad, iPad mini, etc.: -->
<link
rel="apple-touch-icon"
sizes="152x152"
href="/apple-touch-icon-152x152.png" />
<!-- 2x resolution iPhone and other devices: -->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
<!-- basic favicon -->
<link rel="icon" href="/favicon.ico" />
注释解释了每个图标的用途——这些元素涵盖了例如在网站保存到 iPad 主屏幕时提供一个漂亮的高分辨率图标等内容。
现在不用太担心实现所有这些类型的图标——这是一个相当高级的功能，你不会被要求掌握这些知识才能继续课程。这里的主要目的是让你了解这些东西是什么，以防你在浏览其他网站的源代码时遇到它们。如果你确实想了解更多关于所有这些值以及如何选择它们的信息，请阅读<link>元素的参考页面。
注意：如果您的网站使用内容安全策略 (CSP) 来增强其安全性，则该策略适用于网站图标。如果您遇到网站图标无法加载的问题，请验证Content-Security-Policy标头的img-src指令没有阻止对其的访问。
将 CSS 和 JavaScript 应用于 HTML
如今，几乎所有你将使用的网站都会使用CSS使其看起来很酷，并使用JavaScript来提供交互式功能，例如视频播放器、地图、游戏等等。这些通常通过<link>元素和<script>元素分别应用于网页。
-
<link>元素应始终放在文档的 head 部分。它有两个属性，rel="stylesheet"表示它是文档的样式表，href包含样式表文件的路径：html<link rel="stylesheet" href="my-css-file.css" /> -
<script>元素也应该放在 head 部分，并且应该包含一个src属性，其中包含你想要加载的 JavaScript 的路径，以及defer（一个布尔属性），它指示浏览器在页面完成解析 HTML 后加载 JavaScript。defer属性很有用，因为它保证在 JavaScript 运行之前所有 HTML 都已加载，这样你就不会因为 JavaScript 尝试访问页面上尚不存在的 HTML 元素而出现错误。在你的页面上加载 JavaScript 有几种方法，但这是现代浏览器最可靠的一种。html<script src="my-js-file.js" defer></script>注意：
<script>元素可能看起来像一个空元素，但它不是，因此需要一个结束标签。除了指向外部脚本文件之外，你还可以选择将脚本放在<script>元素内部。
轮到你了：将 CSS 和 JavaScript 应用到页面
- 要开始此练习，请获取我们的meta-example.html、script.js和style.css文件的副本，并将它们保存到本地计算机的同一目录中。确保它们以正确的名称和文件扩展名保存。
- 在浏览器和文本编辑器中打开 HTML 文件。
- 按照上面给出的信息，将
<link>和<script>元素添加到您的 HTML 中，以便您的 CSS 和 JavaScript 应用到您的 HTML。
如果操作正确，当你保存 HTML 并刷新浏览器时，你应该能看到一些变化：
- JavaScript 在页面上添加了一个空列表。现在，当你点击列表外的任何位置时，会弹出一个对话框，要求你为新列表项输入一些文本。当你按下“确定”按钮时，一个新的列表项将添加到列表中，其中包含你输入的文本。当你点击一个现有的列表项时，会弹出一个对话框，允许你更改该列表项的文本。
- CSS 使背景变为绿色，文字变大。它还对 JavaScript 添加到页面的一些内容进行了样式设置（带有黑色边框的红色条是 CSS 添加到 JS 生成列表的样式）。
注意：如果您在此练习中遇到困难，无法应用 CSS/JS，请尝试查看我们的css-and-js.html示例页面。
设置文档的主要语言
最后，值得一提的是，你可以（也确实应该）设置页面的语言。这可以通过将lang 属性添加到 HTML 开放标签中来完成（如meta-example.html所示，以及下方所示）。
<html lang="en-US">
…
</html>
这在许多方面都很有用。如果设置了 HTML 文档的语言，搜索引擎会更有效地对其进行索引（例如，允许它在特定语言的结果中正确显示），并且对于使用屏幕阅读器的视力障碍者也很有用（例如，单词“six”在法语和英语中都存在，但发音不同）。
您还可以将文档的子部分识别为不同的语言。例如，我们可以将日语部分识别为日语，如下所示：
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
这些代码由ISO 639-1标准定义。您可以在HTML 和 XML 中的语言标签中找到更多信息。
总结
这标志着我们对 HTML head 的快速浏览结束了——这里还有很多你可以做的事情，但在这个阶段，详尽的介绍会很无聊和令人困惑，我们只想让你现在了解最常见的一些内容！在下一篇文章中，我们将探讨HTML 中的标题和段落。