感谢您关注 Google I/O 大会！观看点播内容。

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

文档结构

HTML 文档包含文档类型声明和 <html> 根元素。<html> 元素中嵌套着文档头和文档正文。虽然文档头在代码之外不可见，但对于网站的正常运行至关重要。它包含所有元信息，包括搜索引擎和社交媒体结果的信息、浏览器标签页和移动设备主屏幕快捷方式的图标，以及内容的行为和呈现方式。在本部分中，您将了解几乎每个网页上都存在的组件，尽管它们不可见。

若要创建 MachineLearningWorkshop.com (MLW) 网站，请先添加应被视为每个网页必备的组件：文档类型、内容的人类语言、字符集，当然还有网站或应用的标题或名称。

添加到每个 HTML 文档

有几个元素对于每个网页都是必不可少的。如果缺少这些元素，浏览器会呈现内容，但您应添加这些元素。

`<!DOCTYPE html>`

任何 HTML 文档中的第一项都是序言。对于 HTML，您只需要 <!DOCTYPE html>。这看起来像是一个 HTML 元素，但实际上是一个名为 doctype 的特殊节点。DOCTYPE 会告知浏览器使用标准模式。如果省略此属性，浏览器会使用另一种呈现模式，即Quirks 模式。包含 doctype 有助于防止进入 Quirks 模式。

`<html>`

<html> 元素是 HTML 文档的根元素。它是 <head> 和 <body> 的父元素，包含 HTML 文档中除 doctype 之外的所有内容。如果省略，则表示语言是隐含的，但您应包含该元素以声明文档的语言。

内容语言

<html> 标记中的 lang 属性用于定义文档的主要语言。该属性的值是 ISO 语言代码，后跟可选的区域。例如，加拿大的法语是 fr-CA，而布基纳法索的法语是 fr-BF。此声明有助于屏幕阅读器、搜索引擎和翻译服务识别文档语言。

您可以在其他标记中使用 lang 属性来标识文档主要语言的例外情况。与在 head 中使用一样，正文中的 lang 属性没有视觉效果。它会添加语义，以便辅助技术和自动化服务识别特定内容的语言。

除了设置文档的语言和该基本语言的例外情况之外，该属性还可用于 CSS 选择器。<span lang="fr-fr">Ceci n'est pas une pipe.</span> 可通过属性和语言选择器 [lang|="fr"] 和 :lang(fr) 进行定位。

`<head>`

在起始 <html> 标记和结束 <html> 标记之间，我们找到了两个子元素：<head> 和 <body>：

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
  </body>
</html>

<head> 包含网站或应用的元数据，而 <body> 包含可见内容。本部分的其余内容重点介绍嵌套在 <head> 元素内的组件。

`<head>` 内的必需组件

文档元数据（包括文档标题、字符集、视口设置、说明、基本网址、样式表链接和图标）位于 <head> 元素中。虽然您可能不需要所有这些功能，但请务必添加字符集、标题和视口设置。

字符编码

<head> 中的第一个元素应该是 charset 字符编码声明。它位于标题之前，可确保浏览器能够呈现该标题中的字符以及文档其余部分中的所有字符。

大多数浏览器中的默认编码为 windows-1252，具体取决于语言区域。不过，您应该使用 UTF-8，这样可以对所有字符进行 1 到 4 字节的编码。

如需将字符编码设置为 UTF-8，请添加以下内容：

<meta charset="utf-8" />

通过声明 UTF-8（不区分大小写），您甚至可以在标题中添加表情符号。

字符编码会继承到文档中的所有内容，甚至包括 <style> 和 <script>。此小声明意味着您可以在类名称和 selectorAPI 中包含表情符号。如果您使用表情符号，请务必以增强易用性且不损害无障碍功能的方式使用。

文档标题

每个网页（包括首页和所有其他网页）都应具有独一无二的标题。文档标题的内容（即起始 <title> 标记和结束 <title> 标记之间的文本）会显示在浏览器标签页、打开的窗口列表、历史记录、搜索结果中，并且除非使用 <meta> 标记重新定义，否则还会显示在社交媒体卡片中。

<title>Machine Learning Workshop</title>

视口元数据

视口元标记对于网站的自适应性至关重要，可确保无论视口宽度如何，内容都能正常呈现。虽然视口元标记自 2007 年以来就已存在，但直到最近才在规范中记录。它可以控制视口大小和缩放比例，防止内容缩小以适应较小的屏幕。

<meta name="viewport" content="width=device-width" />

上述代码表示“使网站具有自适应性，首先将内容宽度设置为屏幕宽度”。除了 width 之外，您还可以设置缩放和可伸缩性，但这两者都默认为无障碍值。如果您想明确指定，请添加：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />

视口是 Lighthouse 无障碍功能审核的一部分。如果您的网站可缩放且未设置最大尺寸，则会通过测试。

到目前为止，我们的 HTML 文件的大纲如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>

  </body>
</html>

其他 `<head>` 内容

<head> 的背后还有很多其他因素。实际上是所有元数据。虽然本单元介绍了 <head> 中的大部分元素，但我们将在元数据模块中分享更多信息。

您已经了解了元字符集和文档标题，但除了 <meta> 标记之外，还有许多其他元数据也应包含在内。

CSS

您可以在 <head> 中添加 HTML 的样式。如果您想了解样式，可以学习专门针对 CSS 的学习路线，但您确实需要了解如何在 HTML 文档中添加样式。

有三种方式可以包含 CSS：<link>、<style> 和 style 属性。

在 HTML 文件中添加样式主要有两种方式：一种是使用 <link> 元素（将 rel 属性设置为 stylesheet）添加外部资源，另一种是将 CSS 直接添加到文档的头部，并将其置于开始标记 <style> 和结束标记 <style> 之间。

<link> 标记是包含样式表的首选方法。链接单个或少量外部样式表有助于提升开发者体验和网站性能：您可以集中维护 CSS，而不是将其分散在各处；浏览器可以缓存外部文件，这意味着每次网页导航时都不必再次下载该文件。

语法为 <link rel="stylesheet" href="styles.css">，其中 styles.css 是样式表的文件名和相对位置。您可能会看到 type="text/css" 属性，但这不是必需的。rel 属性用于定义关系，在本例中为 stylesheet。如果您省略 rel 属性，则不会关联 CSS。

您很快就会发现其他一些 rel 值，但首先您将了解包含 CSS 的其他方式。

如果您希望外部样式表样式位于级联层中，但无法访问 CSS 文件进行修改，则需要将包含 @import 的 CSS 纳入 <style> 中：

<style>
  @import "styles.css" layer(firstLayer);
</style>

使用 @import 将样式表导入文档（可选地导入到级联层）时，@import 语句必须是 <style> 或关联样式表中的第一个语句，位于字符集声明之外。

虽然级联层仍是一项相当新的功能，您可能不会在 <style> 的头部看到 @import，但您通常会在头部样式块中看到声明的自定义属性：

<style>
  :root {
    --theme-color: #226DAA;
  }
</style>

使用 <link>、<style> 或同时使用这两种方式添加的样式应放在头部中。虽然将样式包含在文档正文中也能正常运行，但出于性能考虑，您应将样式添加到头部中。这可能看起来有悖常理，因为您可能认为应先加载内容。但最好让浏览器在加载内容时知道如何呈现内容。先添加样式可防止在首次呈现元素后对其进行样式设置时发生不必要的重绘。

有一种方法可以将您永远不会使用的样式包含在文档的 <head> 中：内嵌样式。您可能永远不会在 head 中使用内嵌样式，因为用户代理的样式表默认会隐藏 head。但如果您想制作一个不使用 JavaScript 的 CSS 编辑器（例如，为了测试网页的自定义元素），可以使用 display: block 使头部可见，然后隐藏头部中的所有内容，再使用内嵌 style 属性使可编辑的内容样式块可见。

<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
  head { display: block; }
  head * { display: none; }
  :root {
    --theme-color: #226DAA;
  }
</style>

您可以向 <style> 元素添加内嵌样式。

`<link>` 元素的其他用途

link 元素用于在 HTML 文档和外部资源之间创建关系。其中一些资源可以下载，另一些资源仅用于提供信息。关系的类型由 rel 属性的值定义。rel 属性有 25 个可用值，可与 <link>、<a> 和 <area> 或 <form> 搭配使用，其中一些值可与所有这些元素搭配使用。最好将与元信息相关的属性包含在 head 中，并将与性能相关的属性包含在 <body> 中。

现在，您将在标头中添加另外三种类型：icon、alternate 和 canonical。您将在下一个模块中添加第四种类型 rel="manifest"。

网站图标

使用 <link> 标记和 rel="icon" 来标识文档的网站图标。网站图标是显示在浏览器标签页上的小图标，通常位于文档标题的左侧。当标签页缩小时，标题可能会消失，但图标仍会显示。大多数网站图标都是公司徽标或应用徽标。

如果您未声明网站图标，浏览器将在顶级目录（网站的根文件夹）中查找名为 favicon.ico 的文件。使用 <link>，您可以指定其他文件名和位置：

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />

上述代码表示“在 16 像素、32 像素或 48 像素有意义的情况下，使用 mlwicon.png 作为图标”。sizes 属性接受可缩放图标的值 any 或以空格分隔的方形 widthXheight 值列表；其中宽度和高度值分别为 16、32、48 或该几何序列中的更大值，省略了像素单位，并且 X 不区分大小写。

<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />

Safari 浏览器有两类特殊的非标准图标：apple-touch-icon（适用于 iOS 设备）和 mask-icon（适用于 macOS 上固定的标签页）。apple-touch-icon 仅在用户将网站添加到主屏幕时应用：您可以指定多个具有不同 sizes 的图标，以用于不同的设备。mask-icon 仅在用户在桌面版 Safari 中固定标签页时使用：图标本身应为单色 SVG，而 color 属性会为图标填充所需的颜色。

虽然您可以使用 <link> 在每个网页上甚至每次网页加载时定义完全不同的图片，但请勿这样做。为确保一致性和良好的用户体验，请使用单张图片。Google 为其不同的应用使用不同的网站图标：例如，有邮件图标、日历图标等。但所有 Google 图标都使用相同的配色方案。您可以通过图标准确了解打开的标签页中的内容。

网站的备用版本

使用 rel 属性的 alternate 值来标识网站的翻译版本或替代表示形式。

假设我们有网站的法语版本和巴西葡萄牙语版本：

<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />

使用 alternate 进行翻译时，必须设置 hreflang 属性。

替代值不仅用于翻译。例如，当 type 属性设置为 application/rss+xml 或 application/atom+xml 时，type 属性可以定义 RSS Feed 的替代 URI。

指向网站的模拟 PDF 版本的链接：

<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />

如果 rel 值为 alternate stylesheet，则表示定义了一个备用样式表，并且必须设置 title 属性，为该备用样式指定一个名称。

Canonical

如果您创建了机器学习研讨会的多个翻译版本或版本，搜索引擎可能无法识别权威来源。请使用 rel="canonical" 来标识网站或应用的首选网址。

在所有翻译后的网页和首页上添加规范网址，指明我们的首选网址：

<link rel="canonical" href="https://www.machinelearning.com" />

rel="canonical" 规范链接最常用于在发布平台和博客平台之间进行交叉发布，以注明原始来源。网站联合发布内容时，应包含指向原始来源的规范链接。

脚本

<script> 标记包含脚本。默认类型为 JavaScript。如果您使用其他脚本语言，请添加包含 MIME 类型的 type 属性，或为 JavaScript 模块添加 type="module" 属性。系统只会解析和执行 JavaScript 和 JavaScript 模块。

<script> 标记可用于封装代码或下载外部文件。在 MLW 中，没有外部脚本文件，因为与普遍的看法相反，您不需要 JavaScript 即可构建功能完善的网站。这是一个 HTML 学习路线，而不是 JavaScript 学习路线。

您稍后将添加少量 JavaScript 代码来创建彩蛋：

<script>
  document.getElementById('switch').addEventListener('click', function() {
    document.body.classList.toggle('black');
  });
</script>

此代码段会为 ID 为 switch 的元素创建一个事件处理脚本。使用 JavaScript 时，应避免在元素存在之前引用该元素。由于 switch 尚不存在，我们暂时不会添加事件处理脚本。

当我们添加电灯开关元素时，会将 <script> 添加到 <body> 的底部，而不是 <head> 中。为什么呢？有两个原因。我们希望确保在遇到引用元素的脚本之前，元素已存在，因为我们不是基于 DOMContentLoaded 事件来编写此脚本的。最重要的是，JavaScript 不仅会阻止渲染，而且浏览器在下载脚本时会停止下载所有资源，直到 JavaScript 执行完毕后才会继续下载其他资源。因此，您通常会在文档末尾而不是标头中找到 JavaScript 请求。

有两个属性可以减少 JavaScript 下载和执行的阻塞特性：defer 和 async。使用 defer 时，下载期间不会阻止 HTML 渲染，并且 JavaScript 仅在文档完成渲染后执行。使用 async 时，下载期间也不会阻止渲染，但脚本下载完成后，渲染会暂停，直到 JavaScript 执行完毕。

如需将 MLW 的 JavaScript 代码放在外部文件中，您可以编写以下代码：

<script src="js/switch.js" defer></script>

添加 defer 属性可将脚本的执行延迟到所有内容都呈现完毕之后，从而防止脚本损害性能。async 和 defer 属性仅对外部脚本有效。

基本

还有一个元素仅在 <head>. 中找到。不常用的 <base> 元素允许设置默认链接网址和目标。href 属性用于定义所有相对链接的基准网址。

target 属性（对 <base> 以及链接和表单有效）用于设置这些链接的打开位置。默认值 _self 会在与当前文档相同的上下文中打开链接的文件。其他选项包括 _blank（在新窗口中打开每个链接）、当前内容的 _parent（如果打开程序不是 iframe，则可能与 self 相同）或 _top（在同一浏览器标签页中打开，但会从任何上下文中弹出以占据整个标签页）。

大多数开发者都会在链接或表单本身中添加 target 属性，以指定少数（如果有）要在新窗口中打开的链接，而不是使用 <base>。

<base target="_top" href="https://machinelearningworkshop.com" />

如果我们的网站嵌套在 Yummly 等网站的 iframe 中，那么包含 <base> 元素意味着，当用户点击我们文档中的任何链接时，该链接将从 iframe 中弹出并占据整个浏览器窗口。

此元素的一个缺点是，锚点链接是通过 <base> 解析的。<base> 可有效地将链接 <a href="#ref"> 转换为 <a target="_top" href="https://machinelearningworkshop.com#ref">，从而触发对附加了 fragment 的基本网址的 HTTP 请求。

关于 <base>，您还需要了解以下几点：

一个文档中只能有一个 <base> 元素。
它应在任何相对网址（包括可能的脚本或样式表引用）之前使用。

现在的代码如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" type="image/png" href="/images/favicon.png" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
    <link rel="canonical" href="https://www.machinelearning.com" />
  </head>
  <body>

    <!-- <script defer src="scripts/lightswitch.js"></script>-->
  </body>
</html>

HTML 注释

脚本包含在尖括号、短划线和感叹号中，这是 HTML 的注释方式。之间的任何内容都不会显示或解析。您可以将 HTML 注释放置在网页上的任何位置，但脚本或样式块中除外，在这些位置您应使用 JavaScript 和 CSS 注释。

您已经了解了 <head> 中的基本内容，但还想了解更多。在接下来的部分中，我们将学习元标记，以及如何控制在社交媒体上链接到您的网站时显示的内容。

检查掌握情况

测试您对文档结构的了解程度。

如何识别文档的语言？

将 language 属性添加到 HTML 标记中。

请重试。

将 lang 属性添加到 HTML 标记中。

正确！

Add the <lang> 元素添加到 <head>。

请重试。

选择可包含在 <head> 中的元素。

<p>

请重试。

<title>

正确！

<meta>

正确！

HTML 概述

元数据

文档结构 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

添加到每个 HTML 文档

<!DOCTYPE html>

<html>

内容语言

<head>

<head> 内的必需组件

字符编码

文档标题

视口元数据

其他 <head> 内容

CSS

<link> 元素的其他用途

网站图标

网站的备用版本

Canonical

脚本

基本

HTML 注释

检查掌握情况

文档结构

`<!DOCTYPE html>`

`<html>`

`<head>`

`<head>` 内的必需组件

其他 `<head>` 内容

`<link>` 元素的其他用途