# HTML 在网络上扮演什么角色？

HTML (超文本标记语言) 是一种用于创建网页的标记语言。当你访问一个网站并看到段落、标题、链接、图像和视频等内容时；那就是由 HTML 实现的。

下面是一个使用 HTML 元素的小示例。尝试在编辑器中修改一些文本，观察预览窗口中的变化。

HTML 通过使用元素来表示网页的内容和结构。大多数元素都有起始标签和结束标签。有时这些标签也称为开始标签和结束标签。在这两个标签之间，就是元素的内容。该内容可以是文本或其他 HTML 元素。

下面是另一个段落元素的示例。将编辑器中的文本改为 I love coding!, 并在预览窗口查看结果。

起始标签和结束标签都以左尖括号 (<) 开始，以右尖括号 (>) 结束，标签名称位于这两个尖括号之间。尽管 HTML 标签名称对大小写不敏感，但普遍接受的约定和最佳实践是将其写为小写。

下面更详细地查看仅包含起始和结束段落标签的部分:

区分开始标签与结束标签的是放在结束标签的左尖括号后紧跟的斜杠 (/)。有些 HTML 元素没有结束标签，这类元素称为空元素 (void elements)。

下面是一个图片元素的示例，图片元素属于空元素:

请注意，这个图片元素没有结束标签，也没有任何内容。空元素不能包含任何内容，只能有开始标签。

有时你会看到在 > 之前使用 / 的空元素，像这样:

虽然许多代码格式化工具 (如 Prettier) 会选择在空元素中包含 /, 但 HTML 规范指出 / 的存在 "并不表示开始标签为自闭合标签，而是不必要的且没有任何影响"。

在实际开发中，你会看到这两种形式，因此熟悉两者都很重要。

如果你想显示一张图片，需要在图片元素中包含几个属性。属性是用于调整 HTML 元素行为的特殊值。

下面是一个带有 src 属性的图片元素示例。将 src 属性的值更新为 "https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" , 你将看到图片变为两只平静睡着的猫。

src 属性用于指定该图像的存放位置。对于图像元素，最好包含另一个名为 alt 的属性。alt 属性用于为图像提供简短的描述性文本。

下面是一个带有 src 和 alt 属性的图像元素示例。尝试通过将 src 的值更改为 "https://.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" 来破坏该图像。你会看到图像消失，只有 alt 文本显示出来。

那么，你可能会想知道仅靠 HTML 是否足以构建一个网站。嗯，答案是：视情况而定。如果你正在构建一个仅显示文本和图像的小型练习项目，单独使用 HTML 可能就足够了。然而，如果你要创建一个现代的专业网站，你将需要同时使用 HTML、CSS 和 JavaScript。

HTML 用于内容和结构。CSS 用于样式。JavaScript 用于为网页添加交互性。一个好的类比是将 HTML、CSS 和 JavaScript 比作一座完整的建筑。

HTML 表示构成墙体的砖块、混凝土和钢筋。它是使建筑牢固的基石。CSS 表示使房屋外观和内饰更美观的设计。JavaScript 表示保证水电不间断供应的电气和供水系统。

# 什么是属性，它们如何工作？

属性是放在 HTML 元素起始标签内的一个值。属性为元素提供额外信息或指定元素应该如何表现。下面是属性的基本语法:

属性名后跟等号 (=) 和用引号括起来的值。该值可以是字符串或数字，具体取决于属性。

第一个示例使用了 href 和 target 属性。href 属性指定链接的 URL,target 属性指定在何处打开该链接。

启用交互式编辑器并将 href="https://www.freecodecamp.org/news/"更改为 href="https://www.freecodecamp.org" 。现在当你在交互式编辑器中点击该链接时，你将在新的浏览器标签页中看到 freeCodeCamp 的主页。

如果没有 href 属性，链接将无法工作，因为不会有目标 URL。因此你必须包含此 href 属性以使链接生效。target="_blank" 可使链接在新的浏览器标签页中打开。你将在后续课程中学习有关 target 属性的更多内容。

其他常见属性有 src 和 alt (或称替代属性)—— 分别用于指定图像的来源并为图像提供替代性描述文本。

启用交互式编辑器并将 src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"更改为 src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"。然后将 alt="Two tabby kittens sleeping together on a couch."更改为 alt="Two cats running in the dirt." 。

类似于 href 属性，src 属性是必需的，因为它指定了要显示的图像文件。alt 属性不是必需的，但出于无障碍考虑建议使用。无障碍性意味着确保所有人 —— 包括有残障的人 —— 都能使用并理解诸如网站、应用和物理空间之类的内容。你将在接下来的课程中学习更多关于无障碍性的内容。

有些属性的语法比较独特，例如 checked 属性。

启用交互编辑器，并尝试在预览窗口中点击复选框，以查看其在选中与未选中状态之间切换的效果。

在下面的示例中，我们有一个 input 元素，其 type 属性设置为 checkbox。输入元素用于收集用户的数据，type 属性指定输入的类型。在本例中，该输入是一个复选框。你将在接下来的课程中进一步学习输入元素的工作原理。

checked 属性用于指定复选框默认应为选中状态。checked 属性不需要赋值。只要存在该属性，复选框就会默认被选中；如果该属性不存在，复选框则为未选中状态。这被称为布尔属性。当你学习到 JavaScript 部分时，会更多了解布尔值的概念。

启用交互式编辑器并尝试从 input 中移除 checked 属性。你会看到复选框不再默认被选中。

在 HTML 中你会遇到若干常见的布尔属性，例如 disabled、readonly 和 required。这些属性用于指定元素的状态，例如是否被禁用、是否为只读或是否为必填。

下面是一个默认被禁用的文本 input 元素示例。启用交互式编辑器并尝试在预览窗口中点击该 input 元素。现在从该 input 元素中移除 disabled 属性，你就会看到该 input 不再默认被禁用。你现在应该能够点击它并在字段内输入文本。

HTML 有许多属性可用于自定义网页上元素的行为和外观。理解如何使用属性对于创建交互性和可访问性的网页内容至关重要。在接下来的课程中，你将学习更多 HTML 属性以及如何在网页开发项目中有效地使用它们。

# 在 HTML 中，link 元素的作用是什么，以及它如何用于链接外部样式表？

让我们了解一下 link 元素，以及如何使用它来链接外部样式表。

link 元素用于链接外部资源，例如样式表和网站图标。以下是将外部 CSS 文件与 link 元素配合使用的基本语法:

rel 属性用于指定被链接资源与 HTML 文档之间的关系。在这种情况下，我们需要将该被链接资源指定为 stylesheet。

将 HTML 与 CSS 分离到不同文件中被视为最佳实践。开发者通常使用 link 元素来引用外部 CSS 文件，而不是将所有内容写入 HTML 文档中。

href 属性用于指定外部资源的 URL 所在位置。

示例中以斜杠开头的 dot (点) 表示计算机会在当前文件夹或目录中查找 styles.css 文件。

link 元素应如下面示例所示放置在 head 元素内部:

在专业代码库中你经常会看到多个 link 元素，它们链接到不同的样式表、字体和图标。下面是使用 link 元素链接到名为 Playwright Cuba 的外部 Google 字体的示例:

Google 字体是一组免费且开源的自定义字体，可在任意项目中使用。您可以选择想要使用的字体，Google 会为您提供必要的 HTML 和 CSS 代码。在此示例中，rel 属性的 preconnect 值指示浏览器与 href 属性中指定的值提前建立连接。这么做是为了加快这些外部资源的加载时间。

元素的另一个常见用例是链接图标。下面是链接网站图标 (favicon) 的示例:

网站图标 (favicon, 来源于 favorite icon 的缩写) 是一个小图标，通常显示在浏览器标签页中网站标题旁边。许多网站会使用 favicon 来展示其品牌图标。

# 什么是 HTML 样板 (Boilerplate), 它为何重要？

让我们来学习 HTML 样板。

你问什么是 HTML 样板？它就像为网页准备好的模板。把它想象成房屋的地基。样板包含每个 HTML 文档所需的基本结构和必要元素。它为你节省时间，并有助于确保页面正确设置。下面是一个示例:

让我们分解这个样板的关键部分。首先，是 DOCTYPE 声明:

它告诉浏览器你正在使用哪个版本的 HTML。接下来，是 html 标签:

它包裹你所有的内容，并可以指定页面的语言。在 html 标签内部，你会发现两个主要部分 ——head 和 body:

head 部分包含重要的幕后的信息:

你网站的元数据，位于 meta 元素中，包含字符编码等信息，以及像 Twitter 这样的站点如何预览你页面链接的详情。你网站的标题，位于 title 元素中，决定出现在浏览器选项卡或窗口中的文字。最后，你通常会在 head 部分使用 link 元素链接页面的外部样式表。

body 部分是放置所有内容的地方:

那么，为什么样板文件很重要？它能确保你的页面结构正确，并在不同浏览器中良好运行。使用样板文件可以帮助你避免常见错误并遵循最佳实践。它是任何网页项目的绝佳起点。请记住，你可以根据自己的需求自定义样板。随着经验的积累，你可能会添加自己偏好的元素或 meta 标签。随着你不断改进个人样板，你会发现它在启动新项目时能为你节省时间。

下次开始新的 HTML 文件时，考虑使用样板文件。它肯定会为你提供一个坚实的构建基础。

# 什么是 UTF-8 字符编码，以及为什么需要它？

UTF-8, 或称 UCS 转换格式 8, 是一种广泛用于网页的标准化字符编码。字符编码是计算机用于将字符存储为数据的方法。本质上，网页上的所有文本都是以一个或多个字节存储的字符序列。在计算中，字节是由 8 位 (二进制位) 组成的数据单位。UTF-8 支持 Unicode 字符集中的每一个字符 —— 这包括所有书写系统、语言和技术符号的字符与符号。下面是使用带有 charset 属性的 meta 元素将字符编码设置为 UTF-8 的示例:

通过将字符编码设置为 UTF-8, 可以确保带重音的 "e" 字符 (é) 在页面上正确显示。下面是使用 UTF-8 字符编码的扩展示例代码:

对于你创建的每个新项目，都应包含此带有 charset 属性并设置为 UTF-8 的 meta 元素。

# 什么是 div 元素以及何时应使用它？

div 元素用作容器，用来对其他元素进行分组。

下面是一个 div 元素的示例。在 div 元素内添加另一个段落元素，然后在预览窗口中查看变化。要查看预览，您需要启用交互式编辑器。

当您想将一组将共享相同 CSS 样式的 HTML 元素分组时，通常会使用 div 元素。您将在后续课程和工作坊中学习更多关于 CSS 的内容。

尽管 div 元素在真实项目代码库中被广泛使用，但你应当注意不要滥用它。有些时候，使用其他元素会更合适。

例如，如果你想将内容划分为若干章节，那么使用 section 元素比使用 div 元素更合适。

在第一个 section 元素下方再添加一个 section 元素。然后在该 section 元素内部添加一个 h2 和一个 p 元素。你可以使用任意文本，并将在预览窗口中看到更改。要与示例交互，你需要启用交互式编辑器。

section 元素具有语义性，而 div 元素则没有语义。语义是指语言中单词或短语的含义。在 HTML 这种语言中，元素也有其自身的语义含义。因此，这意味着如果你使用 section 元素，浏览器会识别其语义含义并理解应将其作为一个章节来处理 —— 无论是在桌面、移动设备，还是其他环境。

# 什么是 ID 和类，何时应该使用它们？

id 属性为 HTML 元素添加唯一标识符。

下面是一个带有 id 为 title 的 h1 元素示例。

在该 h1 元素下面，添加一个 h2 元素，并将其 id 设置为 "subtitle"。你可以为 h2 编写任意文本，预览窗口中会显示相应更改。要与示例交互，你需要启用交互式编辑器。

您可以在 JavaScript 或 CSS 中引用 title 的 id 名称。下面是一个 CSS 示例，引用了 title 的 id, 将文本 color 更改为 red。

注意：在这个交互示例中已经为您提供了一些 CSS。不要担心要去理解这些 CSS 代码，因为您将在后续课程中学到更多。但如果您想看到文本颜色变为蓝色，请启用交互编辑器，点击 styles.css 选项卡，将 color: red; 更改为 color: blue;。

在 title 前面的哈希符号 (#) 表明您想要定位具有该值的 id。id 名称不应被重复使用，且应始终保持唯一。关于 id 值的另一点需要注意的是，它们不能包含空格。下面是一个将单词 main 和 heading 应用于 id 属性值的示例:

浏览器会将此空格视为 id 的一部分，这在样式和脚本处理时会导致不期望的问题。id 属性值应仅包含字母、数字、下划线和连字符。

与 id 属性不同，class 属性的值无需唯一，并且可以包含空格。

下面是将名为 box 的类应用到 div 元素的示例。

如果想为元素添加多个类名，可以用空格分隔这些名称。下面是将多个类应用到 div 元素的更新示例。

下面是将多个类应用到多个 div 元素的另一个示例。

注意：在此交互示例中已经为你提供了一些 CSS。不要担心尝试去理解这些 CSS 代码，因为你将在后续课程中学习更多相关内容。但如果你想更改第一个和第三个框的颜色，可以启用交互编辑器，点击 styles.css 选项卡，然后将 background-color: red; 改为 background-color: black;。

所以，总结一下，何时应该使用 id 而不是 class? 当你想将一组样式应用到多个元素时，类 (class) 是最佳选择。如果你想针对某个特定元素进行样式设置，最好使用 id, 因为该值需要是唯一的。

# 什么是 HTML 实体，以及一些常见示例有哪些？

HTML 实体，或称字符引用，是用于在 HTML 中表示保留字符的一组字符。

假设你想在屏幕上显示文本 This is an <img/> element。如果你使用当前编辑器中的代码，它不会显示期望的结果。即使你在示例中添加了 src 和 alt 属性，它也会在段落中间显示一张图片，而不是期望的结果。要与示例交互，你需要启用交互式编辑器。

当 HTML 解析器看到小于号 (<) 符号后跟 HTML 标签名时，它会将其解释为一个 HTML 元素。这就是为什么你无法在屏幕上得到期望的 This is an <img/> element 结果的原因。

要解决此问题，可以使用 HTML 实体。下面给出一个使用正确 HTML 实体表示小于 (<) 和大于 (>) 符号的更新示例。现在你应该在屏幕上看到 This is an <img/> element。

启用交互式编辑器并尝试在段落元素下方添加一个 <p>learning is fun</p> 。你应该在屏幕上看到 <p>learning is fun</p>。

这类字符引用被称为命名字符引用。命名引用以与号 (&) 开始，以分号 (;) 结束。通过使用命名字符引用，HTML 解析器不会将其与实际的 HTML 元素混淆。

另一类字符引用是十进制数字引用。此字符引用以与号和井号 (#) 开始，后接一个或多个十进制数字，最后以分号结束。

下面是使用小于号的十进制数字引用的示例。

启用交互式编辑器并更改代码以查看不同的符号。您可以使用 © 表示版权符号，使用 ® 表示商标符号。

最后一种字符引用类型是十六进制数字引用。此字符引用以一个和号、井号和字母 x 开头，随后是一个或多个 ASCII 十六进制数字，并以分号结束。

下面是使用小于号的十六进制数字引用的示例。

启用交互式编辑器并更改代码以查看不同的符号。您可以使用 € 表示欧元符号，使用 Ω 表示希腊大写字母欧米伽符号。

# HTML 中 script 元素的作用是什么，以及如何用它来链接外部 JavaScript 文件？

script 元素用于嵌入可执行代码。大多数开发者会使用它来执行 JavaScript 代码。JavaScript 用于为网页添加交互性。使用 JavaScript 的常见示例包括交互式游戏、图像轮播和实时验证用户输入的动态表单。

下面是一个在 HTML 文档中使用 script 元素的示例。将 alert ("Welcome to freeCodeCamp"); 前面的 // 删除，你应该会看到弹出警告。要查看预览，你需要启用交互式编辑器。

尽管技术上可以将所有 JavaScript 代码写在 script 标签内，但更好的做法是链接到外部 JavaScript 文件。下面是一个使用 script 元素链接到外部 JavaScript 文件的示例:

这里使用 src 属性来指定外部 JavaScript 文件的位置。src 代表 "source"(来源)。不建议将所有 JavaScript 放在 HTML 文档内的原因是关注点分离。关注点分离是一种设计原则，将程序分成不同部分，每个部分处理不同的关注点。在本例中，我们希望将 JavaScript 代码与 HTML 代码分离。

# 元描述的作用是什么，它如何影响搜索引擎优化 (SEO)?

SEO (搜索引擎优化) 是一种通过优化网页使其在搜索引擎上更易被发现并获得更高排名的实践。提升网站 SEO 的一种方法是使用 meta 元素为网页提供简短描述。下面是一个为园艺网站设置页面描述的 meta 元素示例:

将 name 属性设置为 description 可确保浏览器、搜索引擎和其他网页工具正确解释该元数据。描述内容应写在 content 属性中。建议将描述保持简短凝练，因为搜索引擎通常会根据结果页面的布局截断描述内容。

与其他类型的 meta 元素相似，meta 描述不会在网页本身上可见。页面描述可以出现在搜索引擎结果页面的摘要片段中。以下是 freeCodeCamp 的 subreddit 和 GitHub 仓库在搜索结果中摘要片段的一些示例:

在这些示例中，每个页面的描述都位于站点链接正下方。用户在几秒钟内就能大致了解页面内容，并决定是否点击链接以获取更多信息。

尽管 meta 描述不会直接影响网站在搜索引擎中的排名，但具有吸引力的描述可能会为你的网站带来更多流量。

# 开放图谱 (Open Graph) 标签的作用是什么，它们如何影响搜索引擎优化 (SEO)?

开放图谱协议 (Open Graph Protocol) 使您能够控制网站内容在各类社交媒体平台 (如 Facebook、LinkedIn 等) 上的展示方式。通过设置这些开放图谱属性，您可以吸引用户点击并与您的内容互动。您可以在 HTML 的 head 部分通过一组 meta 元素来设置这些属性。

第一个需要包含的重要 OG 属性是 title。以下是为 freeCodeCamp 主页设置 OG title 的示例:

对于 property 属性，您需要将其指定为 og:title。content 属性用于填写您希望在社交媒体网站上显示的标题。

下一个重要的 OG 属性是 type。下面是为 freeCodeCamp 主页使用 OG type 的示例:

type 属性用于表示在社交媒体上共享的内容类型。此类内容的示例包括文章、网站、视频或音乐。

第三个重要的 OG 属性是 image。下面是为 freeCodeCamp 主页设置 OG image 的示例:

在此示例中，开放图像 (Open Graph image) 指向 freeCodeCamp 徽标。所有这些图像都应具有高质量、合适的尺寸和纵横比。大多数社交媒体平台都会提供图像要求的标准，帮助你确保内容在其站点上良好显示。例如，developers.facebook.com 文档页面指出:

"在高分辨率设备上获得最佳显示效果，请使用至少 1200 x 630 像素的图像。至少应使用 600 x 315 像素的图像，以便在链接页面帖子中显示较大的图像。"

第四个重要的 OG 属性是 url。下面是为 freeCodeCamp 主页设置 OG url 的示例:

还有许多其他可以设置的 OG 属性，例如 description、audio、video 和 locale。然而，开放图谱的 url、image、type 和 title 是最重要的，需要包含在内。

那么这些开放图谱属性如何影响搜索引擎优化 (SEO) 呢？当你的内容在社交媒体上被分享时，精心设计的 OG 属性可以提升内容在用户信息流中的呈现效果。这可能带来更高的点击率，从而向搜索引擎传递你的内容具有相关性和吸引力的信号。

# HTML 的 audio 和 video 元素有什么作用，它们如何工作？

audio 和 video 元素允许你在 HTML 文档中添加音频和视频内容。audio 元素支持常见音频格式，如 mp3、wav 和 ogg。video 元素支持 mp4、ogg 和 webm 格式。

要在网页中包含音频内容，可以使用带有指向音频文件位置的 src 属性的 audio 元素。

如你在预览窗口中所见，页面上没有任何显示。要查看预览，你需要启用交互式编辑器。

如果你想在页面上显示音频播放器，可以添加带有 controls 属性的 audio 元素。

在预览窗口中按播放可以听到 Quincy Larson 的一首歌曲。要听不同的歌曲，请将 src 的值改为 "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3" 。要查看预览，你需要启用交互式编辑器。

controls 属性使用户能够控制音频播放，包括调节音量、暂停或恢复播放。controls 属性是一个布尔属性，可添加到元素以启用内置的播放控件。如果省略，则不会显示任何控件。

除了 src 和 controls 属性之外，还有其他一些属性可以增强 audio 元素的功能。loop 属性是一个布尔属性，可使音频循环播放。

下面是使用 loop 属性来循环播放 Quincy Larson 的一首名为 "Can't stay down" 的示例。要查看循环播放的效果，请启用交互式编辑器，将播放头拖到接近歌曲结尾的位置，歌曲播放完毕后会再次重新开始。

另一个可以使用的属性是 muted 属性。当该布尔属性出现在 audio 元素中时，音频将以静音状态开始。下面是使用 muted 属性的示例。

要听到音乐，请启用交互式编辑器并点击音频播放器中的音量图标。

关于音频文件类型，不同浏览器对各类型的支持存在差异。为兼容这些差异，可以在 audio 元素内部使用多个 source 元素，浏览器会选择它所支持的第一个来源。下面是为 audio 元素使用多个 source 元素的示例:

浏览器会先尝试 ogg 类型的音频，如果无法播放该音频，则会继续尝试列表中的下一个类型。

到目前为止我们学到的所有属性也同样适用于 video 元素。下面是一个使用了 loop、controls 和 muted 属性的 video 元素示例。

在开启的 video 标签上添加 autoplay 属性以使视频自动播放。要与示例进行交互，您需要启用交互式编辑器。

注意：这里使用 width 属性是为了使视频更小并更好地适应预览窗口。您将在后续课程中了解更多关于 width 属性的内容。

对于 src (或源属性), 我们使用来自 archive.org 的名为 "Big Buck Bunny" 的视频。如果你想在视频下载时显示一张图片，可以使用 poster 属性。该属性不适用于 audio 元素，仅适用于 video 元素。下面是使用由 peach.blender.org. 提供内容的 poster 属性的示例。