本页面启用了交互式编辑器，加载时间可能稍长
请刷新页面以启用交互式编辑器
# HTML 在网络上扮演什么角色？
HTML (超文本标记语言) 是一种用于创建网页的标记语言。当访问一个网站并看到段落、标题、链接、图像和视频等内容时；那就是由 HTML 实现的。
下面是一个使用 HTML 元素的小示例。尝试在编辑器中修改一些文本，观察预览窗口中的变化。
HTML 通过使用元素来表示网页的内容和结构。大多数元素都有起始标签和结束标签。有时这些标签也称为开始标签和结束标签。在这两个标签之间，就是元素的内容。该内容可以是文本或其他 HTML 元素。
下面是另一个段落元素的示例。将编辑器中的文本改为 I love coding! , 并在预览窗口查看结果。
起始标签和结束标签都以左尖括号 < 开始，以右尖括号 > 结束，标签名称位于这两个尖括号之间。尽管 HTML 标签名称对大小写不敏感，但普遍接受的约定和最佳实践是将其写为小写。
下面更详细地查看仅包含起始和结束段落标签的部分:
<p> | |
</p> |
区分开始标签与结束标签的是放在结束标签的左尖括号后紧跟的斜杠 / 。有些 HTML 元素没有结束标签，这类元素称为空元素 (void elements)。
下面是一个图片元素的示例，图片元素属于空元素:
<img> |
请注意，这个图片元素没有结束标签，也没有任何内容。空元素不能包含任何内容，只能有开始标签。
有时会看到在 > 之前使用 / 的空元素，像这样:
<img /> |
虽然许多代码格式化工具 (如 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 元素起始标签内的一个值。属性为元素提供额外信息或指定元素应该如何表现。下面是属性的基本语法:
<element attribute="value"></element> |
属性名后跟等号 = 和用引号括起来的值。该值可以是字符串或数字，具体取决于属性。
第一个示例使用了 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 元素配合使用的基本语法:
<link rel="stylesheet" href="./styles.css" />< |
rel 属性用于指定被链接资源与 HTML 文档之间的关系。在这种情况下，我们需要将该被链接资源指定为 stylesheet。
将 HTML 与 CSS 分离到不同文件中被视为最佳实践。开发者通常使用 link 元素来引用外部 CSS 文件，而不是将所有内容写入 HTML 文档中。
href 属性用于指定外部资源的 URL 所在位置。
示例中以斜杠开头的 dot (点) 表示计算机会在当前文件夹或目录中查找 styles.css 文件。
link 元素应如下面示例所示放置在 head 元素内部:
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Examples of the link element</title> | |
<link rel="stylesheet" href="./styles.css" /> | |
</head> |
在专业代码库中经常会看到多个 link 元素，它们链接到不同的样式表、字体和图标。下面是使用 link 元素链接到名为 Playwright Cuba 的外部 Google 字体的示例:
<link rel="preconnect" href="https://fonts.googleapis.com" /> | |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
<link | |
href="https://fonts.googleapis.com/css2?family=Playwrite+CU:wght@100..400&display=swap" | |
rel="stylesheet"/> |
Google 字体是一组免费且开源的自定义字体，可在任意项目中使用。可以选择想要使用的字体，Google 会为提供必要的 HTML 和 CSS 代码。在此示例中， rel 属性的 preconnect 值指示浏览器与 href 属性中指定的值提前建立连接。这么做是为了加快这些外部资源的加载时间。
元素的另一个常见用例是链接图标。下面是链接网站图标 (favicon) 的示例:
<link rel="icon" href="favicon.ico" /> |
网站图标 (favicon, 来源于 favorite icon 的缩写) 是一个小图标，通常显示在浏览器标签页中网站标题旁边。许多网站会使用 favicon 来展示其品牌图标。
# 什么是 HTML 样板 (Boilerplate), 它为何重要？
让我们来学习 HTML 样板。
问什么是 HTML 样板？它就像为网页准备好的模板。把它想象成房屋的地基。样板包含每个 HTML 文档所需的基本结构和必要元素。它为节省时间，并有助于确保页面正确设置。下面是一个示例:
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<meta | |
name="viewport" | |
content="width=device-width, initial-scale=1.0" /> | |
<title>freeCodeCamp</title> | |
<link rel="stylesheet" href="./styles.css" /> | |
</head> | |
<body> | |
</body> | |
</html> |
让我们分解这个样板的关键部分。首先，是 DOCTYPE 声明:
<!DOCTYPE html> |
它告诉浏览器正在使用哪个版本的 HTML。接下来，是 html 标签:
<!DOCTYPE html> | |
<html lang="en"> | |
<!--All other elements go inside here--> | |
</html> |
它包裹所有的内容，并可以指定页面的语言。在 html 标签内部，会发现两个主要部分 —— head 和 body :
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<!--Important metadata goes here--> | |
</head> | |
<body> | |
<!--Headings, paragraphs, images, etc. go inside here--> | |
</body> | |
</html> |
head 部分包含重要的幕后的信息:
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Document Title Goes Here</title> | |
<link rel="stylesheet" href="./styles.css" /> | |
</head> |
网站的元数据，位于 meta 元素中，包含字符编码等信息，以及像 Twitter 这样的站点如何预览页面链接的详情。网站的标题，位于 title 元素中，决定出现在浏览器选项卡或窗口中的文字。最后，通常会在 head 部分使用 link 元素链接页面的外部样式表。
body 部分是放置所有内容的地方:
<body> | |
<h1>I am a main title</h1> | |
<p>Example paragraph text</p> | |
</body> |
那么，为什么样板文件很重要？它能确保的页面结构正确，并在不同浏览器中良好运行。使用样板文件可以帮助避免常见错误并遵循最佳实践。它是任何网页项目的绝佳起点。请记住，可以根据自己的需求自定义样板。随着经验的积累，可能会添加自己偏好的元素或 meta 标签。随着不断改进个人样板，会发现它在启动新项目时能为节省时间。
下次开始新的 HTML 文件时，考虑使用样板文件。它肯定会为提供一个坚实的构建基础。
# 什么是 UTF-8 字符编码，以及为什么需要它？
UTF-8, 或称 UCS 转换格式 8, 是一种广泛用于网页的标准化字符编码。字符编码是计算机用于将字符存储为数据的方法。本质上，网页上的所有文本都是以一个或多个字节存储的字符序列。在计算中，字节是由 8 位 (二进制位) 组成的数据单位。UTF-8 支持 Unicode 字符集中的每一个字符 —— 这包括所有书写系统、语言和技术符号的字符与符号。下面是使用带有 charset 属性的 meta 元素将字符编码设置为 UTF-8 的示例:
<meta charset="UTF-8" /> |
通过将字符编码设置为 UTF-8, 可以确保带重音的 e 字符 é 在页面上正确显示。下面是使用 UTF-8 字符编码的扩展示例代码:
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Examples of the UTF-8 encoding</title> | |
</head> | |
<body> | |
<p>Café</p> | |
</body> | |
</html> |
对于创建的每个新项目，都应包含此带有 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 属性值的示例:
<h1 id="main heading">Main heading</h1> |
浏览器会将此空格视为 id 的一部分，这在样式和脚本处理时会导致不期望的问题。 id 属性值应仅包含字母、数字、下划线和连字符。
与 id 属性不同， class 属性的值无需唯一，并且可以包含空格。
下面是将名为 box 的类应用到 div 元素的示例。
<div class="box"></div> |
如果想为元素添加多个类名，可以用空格分隔这些名称。下面是将多个类应用到 div 元素的更新示例。
<div class="box red-box"></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 文件的示例:
<script src="path-to-javascript-file.js"></script> |
这里使用 src 属性来指定外部 JavaScript 文件的位置。 src 代表 "source"(来源)。不建议将所有 JavaScript 放在 HTML 文档内的原因是关注点分离。关注点分离是一种设计原则，将程序分成不同部分，每个部分处理不同的关注点。在本例中，我们希望将 JavaScript 代码与 HTML 代码分离。
# 元描述的作用是什么，它如何影响搜索引擎优化 (SEO)?
SEO (搜索引擎优化) 是一种通过优化网页使其在搜索引擎上更易被发现并获得更高排名的实践。提升网站 SEO 的一种方法是使用 meta 元素为网页提供简短描述。下面是一个为园艺网站设置页面描述的 meta 元素示例:
<meta | |
name="description" | |
content="Discover expert tips and techniques for gardening in small spaces, choosing the right plants, and maintaining a thriving garden." | |
/> |
将 name 属性设置为 description 可确保浏览器、搜索引擎和其他网页工具正确解释该元数据。描述内容应写在 content 属性中。建议将描述保持简短凝练，因为搜索引擎通常会根据结果页面的布局截断描述内容。
与其他类型的 meta 元素相似， meta 描述不会在网页本身上可见。页面描述可以出现在搜索引擎结果页面的摘要片段中。以下是 freeCodeCamp 的 subreddit 和 GitHub 仓库在搜索结果中摘要片段的一些示例:
r\FreeCodeCamp: This is the official subreddit for the freeCodeCamp.org community. Learn to
code for free together with millions of other people...
Our full-stack web development and machine learning curriculum is completely free and self-
paced. We have thousands of interactive coding challenges to help you...
在这些示例中，每个页面的描述都位于站点链接正下方。用户在几秒钟内就能大致了解页面内容，并决定是否点击链接以获取更多信息。
尽管 meta 描述不会直接影响网站在搜索引擎中的排名，但具有吸引力的描述可能会为的网站带来更多流量。
# 开放图谱 (Open Graph) 标签的作用是什么，它们如何影响搜索引擎优化 (SEO)?
开放图谱协议 (Open Graph Protocol) 使能够控制网站内容在各类社交媒体平台 (如 Facebook、LinkedIn 等) 上的展示方式。通过设置这些开放图谱属性，可以吸引用户点击并与的内容互动。可以在 HTML 的 head 部分通过一组 meta 元素来设置这些属性。
第一个需要包含的重要 OG 属性是 title 。以下是为 freeCodeCamp 主页设置 OG title 的示例:
<meta content="freeCodeCamp.org" property="og:title" /> |
对于 property 属性，需要将其指定为 og:title 。 content 属性用于填写希望在社交媒体网站上显示的标题。
下一个重要的 OG 属性是 type 。下面是为 freeCodeCamp 主页使用 OG type 的示例:
<meta property="og:type" content="website" /> |
type 属性用于表示在社交媒体上共享的内容类型。此类内容的示例包括文章、网站、视频或音乐。
第三个重要的 OG 属性是 image 。下面是为 freeCodeCamp 主页设置 OG image 的示例:
<meta | |
content="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png" | |
property="og:image" | |
/> |
在此示例中，开放图像 (Open Graph image) 指向 freeCodeCamp 徽标。所有这些图像都应具有高质量、合适的尺寸和纵横比。大多数社交媒体平台都会提供图像要求的标准，帮助确保内容在其站点上良好显示。例如， developers.facebook.com 文档页面指出:
"在高分辨率设备上获得最佳显示效果，请使用至少 1200 x 630 像素的图像。至少应使用 600 x 315 像素的图像，以便在链接页面帖子中显示较大的图像。"
第四个重要的 OG 属性是 url 。下面是为 freeCodeCamp 主页设置 OG url 的示例:
<meta property="og:url" content="https://www.freecodecamp.org" /> |
还有许多其他可以设置的 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 属性的示例。
<video | |
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" | |
loop | |
controls | |
muted | |
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" | |
width="400" | |
></video> |
# 有哪些优化媒体资源的常见方法？
在网页上使用媒体（例如图片）时，有三个需要考虑的工具：尺寸、格式和压缩。
先说说图片的尺寸。当你构建网站时，通常会将图片样式化为特定尺寸显示。例如，你可能让一张图片以 640x480 的分辨率显示。640 表示宽度，480 表示高度（以像素为单位）。在准备图片时，你应将其缩放到 640x480，以匹配该样式。如果你提供的是一张 1920x1080 的图片却将其样式设得小得多，就会让用户下载不必要的数据。较小的分辨率会带来较小的文件体积。
接下来要考虑的是文件格式。两种最常见的文件格式是 PNG 和 JPG，但这些已不再是用于提供图片的最理想格式。除非你需要支持旧版浏览器，否则应考虑使用更优化的格式，如 WEBP 或 AVIF。
最后，你可以对图像运行压缩算法。压缩算法用于减小文件或数据的体积。可以选择像 pngcrush 这样的工具在本地压缩图像，或者使用在线压缩工具。不过，值得注意的是，某些文件格式（例如 JPG）并非无损。无损意味着可以从压缩数据完美重建原始数据。如果对 JPG 图像进行压缩，会导致质量下降。在为网页选择图像时，应将这些因素纳入考虑。
# 不同类型的图片许可有哪些，它们如何运作？
图像被视为知识产权，这意味着它们受版权法规保护，通常归创作者所有。默认情况下，图像被以 “保留所有权利” 方式发布。创作者，或有时是出版者，持有该图像的全部版权。
这意味着除非你采取以下三种做法之一，否则不能在网页中使用它们：从版权持有者处获得书面许可、从版权持有者处购买许可，或以属于合理使用范畴的方式使用该图像。
第三点有点棘手。合理使用要求你对图像的使用既是有限的又具有变革性。合理使用的一些示例包括对艺术作品进行评论或评审，或对图像进行模仿或恶搞（讽刺性改编）。
有些图像可能以宽松的许可发布，例如知识共享（Creative Commons）许可，或 freeCodeCamp 使用的 BSD 许可。这些图像可以在你的网站中使用，但你需要阅读许可以了解使用这些图像时需遵守的规则。例如，你可能被要求将你的网站开源，或可能不被允许以任何方式修改该图像。
最后，有些图像可能被置于公有领域。公有领域中的图像不附带版权，可以无需任何限制地自由使用。明确以 Creative Commons 0 许可发布的图像被视为公有领域。
大多数搜索引擎允许你按许可筛选图像结果。还有像 Pixabay 和 Unsplash 这样的网站，提供可免费使用的图像。在网站使用图像时务必注意版权和许可。
# 什么是 SVG，以及何时应使用它们？
首先，你需要了解图像的工作原理。常见的图像格式如 PNG 和 JPG 属于点阵（光栅）格式。这基本上意味着它们是基于像素的，其数据记录每个像素的颜色值。
基于光栅的图像的一个主要缺点是它们不能很好地放大。如果你曾尝试将 PNG 放大，可能会发现它变得像素化或模糊。
SVG 是一种不同类型的图像。SVG 代表可缩放矢量图形。矢量图形基于路径和方程来跟踪数据，以绘制点、线和曲线。这实际上意味着矢量图形（如 SVG）可以缩放到任意大小而不影响质量。
SVG 的一个额外好处是它以 XML 格式存储数据。这意味着你可以将它们作为包含 svg 元素的原始 HTML 直接在代码中使用。它也意味着你可以以编程方式改变图像的颜色。
要将笑脸改为红色，请启用交互式编辑器并将 fill="yellow" 改为 fill="red" 。
下面是示例的基本元素：
svg元素是整个绘图的容器。它设置了所有形状出现的空间。你想用 SVG 绘制的所有内容，例如圆、线或路径，都放在svg元素内。circle元素用于绘制面部和眼睛。一个大圆构成黄色的脸，两个较小的圆构成眼睛。path元素用于绘制微笑。它为嘴巴创建一条曲线。- 每个 SVG 元素都有控制其外观和在绘图区域中位置的属性。
下面还有几个示例。要更改任何示例的颜色，请将fill属性的值更新为任意命名颜色，例如red、green、blue、yellow等。
那么什么时候你会想使用 SVG 呢？一个很好的用例是图标。如果你想创建自定义项目符号，或在链接中添加图标以表示社交媒体平台，使用 SVG 是最佳方法。最受欢迎的图标库之一 Font Awesome 就为其图标使用 SVG 图像。SVG 对网页徽标也非常合适，因为它们可以完美缩放，允许你将布局适配到任何响应式设计需求。下次在本地有 SVG 文件时，试着用文本编辑器打开并尝试修改代码。
# 什么是替换元素，有哪些示例？
被替换元素是指其内容由外部资源决定而不是由 CSS 本身决定的元素。CSS（层叠样式表）用于为网页添加样式。常见的被替换元素示例包括 image 、 iframe 和 video 元素。
对于被替换元素，你可以控制该元素的位置或布局，但你的 CSS 无法直接修改该元素的内容。通过一些示例可能更容易说明。考虑 image 元素，它在网页中嵌入一张图片：
<img src="example-img-url" alt="Descriptive text goes here"> |
该元素本身被外部对象替换：即图片。你的 CSS 可以控制诸如图片的定位或对其应用滤镜等，但你无法实际修改图片本身。更具代表性的例子可能是 iframe 元素，它在你的网页中嵌入一个外部站点。
下面是使用 iframe 元素嵌入 freeCodeCamp 频道上一段热门 YouTube 视频的示例。如果你想在预览窗口中观看不同的视频，请将 src 属性的值更改为你选择的视频。要查看预览，你需要启用交互式编辑器。
注意：不用担心交互示例中提到的那些额外属性，比如 referrerpolicy 和 allowfullscreen。你将在以后的工作坊中学习更多关于使用 iframe 元素的内容。
另一个常见的 iframe 元素用例是将地图嵌入页面。下面是一个嵌入地图的示例。
启用交互式编辑器，尝试通过放大 / 缩小来操作地图本身。
该元素本身会被外部对象（即该站点）替换。你的 CSS 可以改变嵌入站点的位置，但你无法修改该站点的内容。进一步说明，如果被嵌入的站点有一个 h1 元素，你的 CSS 将不能为该 h1 元素设置样式。你无法更改其大小、字体颜色等。
还有一些其他的替换元素，例如 video 和 embed 。有些元素在特定情况下也会表现为替换元素。以下是一个将 type 属性设置为 image 的 input 元素示例：
<input type="image" alt="Descriptive text goes here" src="example-img-url"> |
这种类型的 input 被视为替换元素，但其他类型的 input ，例如 text 或 email ，则不是替换元素。
# 如何使用 iframe 元素将视频嵌入页面？
在前一课中，你首次接触了 iframe 元素。在本课中，你将进一步学习如何使用 iframe 元素。该元素代表内联框架（inline frame）。它是一个内联元素，用于在 HTML 页面内直接嵌入其他 HTML 内容。该 HTML 内容可以是视频、地图、另一个 HTML 元素，甚至是其他网页。
下面是一个从 YouTube 嵌入 freeCodeCamp 热门课程的示例。要查看不同的视频，请启用交互式编辑器并将 src 值更改为你选择的视频。
src 属性指定你要嵌入页面的 URL。 width 属性指定 iframe 的宽度。 height 属性指定 iframe 的高度。 allowfullscreen 属性允许用户将 iframe 以全屏模式显示。为 iframe 指定 title 属性也是一种良好做法，因为这对无障碍访问非常重要。
另一方面， allow 属性允许你定义 iframe 可以或不可以做什么。这称为允许列表。在上例中，将 clipboard-write 添加到其中允许嵌入页面向你的剪贴板写入项目。允许列表中的项目可以用分号或空格分隔，也可以同时使用两者。
注意，视频可以来自任何地方。不必非得来自 YouTube 或 Vimeo 等视频服务。
别忘了你也可以在 iframe 元素中嵌入地图、其他网页或直接的 HTML。下面是一个嵌入地图的示例。
尝试通过放大和缩小与地图进行交互。
如果要在 iframe 元素内部嵌入直接的 HTML，必须使用 srcdoc 属性而不是 src 。
# 不同的 target 属性类型有哪些，它们如何工作？
你可能见过锚元素（或链接）上的 target 属性。这个重要的属性告诉浏览器在何处打开锚元素的 URL。
启用交互式编辑器，点击该链接，你将被引导在新的浏览器标签页中打开 freeCodeCamp 主页。
该属性有四个重要的可能取值。注意每个取值前都带有下划线。
第一个取值是 _self ，这是默认值。它会在当前浏览上下文中打开链接。在大多数情况下，这将是当前的标签页或窗口。
第二个值是 _blank ，它在新的浏览上下文中打开链接。通常这会在新标签页中打开。但有些用户可能会将浏览器配置为改成在新窗口中打开。
第三个值是 _parent ，它在当前上下文的父级中打开链接。例如，如果你的网站包含一个 iframe ，该 iframe 中的 _parent 值会在你网站的标签 / 窗口中打开，而不是在嵌入的框架内。
第四个值是 _top ，它在最顶层的浏览上下文中打开链接 —— 可以理解为 “父级的父级”。这类似于 _parent ，但该链接将始终在完整的浏览器标签 / 窗口中打开，即使在嵌套的嵌入框架中也是如此。
第五个值名为 _unfencedTop ，目前用于实验性的 FencedFrame API。在本课编写时，你大概还没有理由使用它。
在创建网站时，选择合适的 target 值以控制用户的最终去向是一个重要的考量。
# 绝对路径和相对路径有什么区别？
路径是一个字符串，用于指定文件系统中某个文件或目录的位置。在 Web 开发中，路径使开发者能够链接到图像、样式表、脚本和其他网页等资源。路径分为绝对路径和相对路径 —— 在指定文件系统内的位置时，两者都很重要。下面我们来看看这两种路径，以便你能决定何时使用哪一种。
绝对路径是指向资源的完整链接。它从根目录开始，包含每一个中间目录，最后是文件名和扩展名。“根目录” 指的是层级结构中的顶层目录或文件夹。
绝对路径还包含协议 —— 可能是 http 、 https 或 file ，如果资源位于网络上还会包含域名。下面是一个指向 freeCodeCamp 徽标的绝对路径示例：
示例代码
<a href="https://design-style-guide.freecodecamp.org/img/fcc_secondary_small.svg"> | |
View fCC Logo | |
</a> |
在此示例中，协议是 https ，域名是 design-style-guide.freecodecamp.org ，文件名是 fcc_secondary_small.svg 。
那么，如果你想用绝对路径链接的资源在你的本地机器上该怎么办？以下是如何用绝对路径链接到 about.html 文件：
示例代码
<p> | |
Read more on the | |
<a | |
href="/Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/about.html" | |
>About Page</a | |
> | |
</p> |
看起来是这样的，因为我们先进入名为 Users 的文件夹，然后进入名为 user 的文件夹，再进入名为 Desktop 的文件夹，然后进入名为 fCC 的文件夹，再进入名为 script-code 的文件夹，然后进入名为 absolute-vs-relative-paths 的文件夹，再进入名为 pages 的文件夹，最终获得 about.html 文件。
下面是在浏览器地址栏中绝对 URL 的样子：
示例代码
file:///Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/about.html
该 URL 包含协议 file:// 。它还包含路径，看起来像这样： /Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/ ，表示通向该文件的一系列文件夹。最后，它还包含 about.html ，即文件名和扩展名。
现在，我们来看看相对路径。相对路径指定文件相对于当前文件所在目录的位置。它不包含协议或域名，因此对于同一网站内部链接而言更短、更灵活。下面是在同一文件夹中的 contact.html 页面链接到 about.html 页面 的示例：
示例代码
<p> | |
Read more on the | |
<a href="about.html">About Page</a> | |
</p> |
所以想象你在 contact.html 页面，并且由于 about.html 页面位于相同位置，你只需获取文件名。这是使用相对文件路径的一个例子。
那么，你应该在何时使用哪种路径；绝对路径还是相对路径？以下是你应遵循的规则：
- 在链接到托管于外部网站的资源时使用绝对路径。
- 当你需要链接到的页面或资源无论文档在站点内的何处都能一致地工作时，请使用绝对路径。
- 在链接同一网站内的资源时，请使用相对路径。
- 如果你希望在开发过程中保持代码更清晰、更易维护，请使用相对路径。
- 在本地测试期间使用相对路径，以确保链接在无互联网连接时也能工作。
# 路径语法中的斜杠、单点和双点有什么区别？
你可能见过像 /public/logo.png 、 ./script.js 或 ../styles.css 这样的链接。但这些特殊类型的链接是什么意思？这些称为文件路径。有三种关键语法需要了解。首先是斜杠，根据你的操作系统可以是反斜杠 \ 或正斜杠 / 。第二是单点 . 。最后是双点 .. 。
斜杠被称为 “路径分隔符”。它用于表示文件夹或文件名之间的分隔。这样你的计算机就知道 naomis-files/ 指向同名的目录，而 naomis/files/ 指向 naomis 目录下的 files 目录。
单点指向当前目录，双点指向父目录。你通常会看到使用单点来确保路径被识别为相对路径。记住你在前一课中学过的相对路径与绝对路径的区别。
然而，双点在访问当前工作目录外的文件时更为常见。
例如，给定此文件树：
示例代码
my-app/
├─ public/
│ ├─ favicon.ico
│ ├─ index.html
├─ src/
│ ├─ index.css
│ ├─ index.js
如果你的 public/index.html 文件需要加载 favicon.ico 文件，你应使用单点的相对路径来访问当前目录： ./favicon.ico 。如果你的 public/index.html 文件需要加载 index.css 文件，你应使用双点的相对路径先导航到父目录 my-app ，然后进入 src 目录，最后到达你的文件： ../src/index.css 。
# 不同的链接状态有哪些，为什么它们很重要？
你可能见过网页上的链接在被点击后变成紫色。这是因为链接的状态发生了变化，因此会应用不同的样式。链接可以处于五种不同的状态之一。
第一种是默认状态，即 :link 。此状态代表用户尚未访问、点击或与之交互的链接。你可以将此状态视为为页面上所有链接提供基础样式。其他状态是在此基础上叠加的。
启用交互式编辑器并查看预览窗口中的链接。它应为默认的蓝色，表示默认状态。如果你点击它，它就会变成紫色。
第二种状态是 :visited ，当用户已访问所链接的页面时会应用该状态。默认情况下，这会将链接变为紫色 —— 但你可以利用 CSS 为用户提供不同的视觉提示。这有助于让用户知道他们已经阅读过你文档的某一部分，或者该网站是他们以前使用过、值得信赖的。
单击预览窗口中的链接，你应该会看到已访问的链接颜色变为棕色。要查看预览，你需要启用交互式编辑器。
注意 ：为此交互示例提供了一些 CSS，以便你可以看到链接样式的变化。无需担心去理解这些 CSS 代码，因为你将在后续模块中学习它们的含义。
第三种状态是 :hover 。当用户将光标悬停在链接上时，此状态会应用。此状态有助于为链接提供额外的关注，确保用户确实有意点击它。
启用交互式编辑器并尝试将鼠标悬停在该链接上。你会看到颜色变为红色。
然后是 :focus 。当我们将焦点放在链接上时，该状态会生效。
在预览窗口的任意留白处点击，然后在键盘上按 tab 。你应该会看到链接变为绿色。要查看这些预览，需要启用交互式编辑器。
最后是 :active 。当链接正在被用户激活时，该状态会生效。这通常意味着用主鼠标按钮点击链接（在大多数情况下是左键单击）。该状态有助于向用户显示他们点击的元素是可交互的。
启用交互式编辑器并点击该链接。你应该会看到链接变为黑色。这个变化发生得很快，所以你可能需要多点几次才能看到颜色变化。
当你使用这些状态来为链接添加样式时，书写 CSS 的顺序需要遵循： link 、 visited 、 hover 、 focus ，然后是 active 。
现在你应该知道如何在为页面中的链接添加个人风格的同时，仍然提供用户需要的关于每个链接状态的重要信息。
