# 有哪些优化媒体资源的常见方法？

在网页上使用媒体（例如图片）时，有三个需要考虑的工具：尺寸、格式和压缩。

先说说图片的尺寸。当你构建网站时，通常会将图片样式化为特定尺寸显示。例如，你可能让一张图片以 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 元素，它在网页中嵌入一张图片：

该元素本身被外部对象替换：即图片。你的 CSS 可以控制诸如图片的定位或对其应用滤镜等，但你无法实际修改图片本身。更具代表性的例子可能是 iframe 元素，它在你的网页中嵌入一个外部站点。

下面是使用 iframe 元素嵌入 freeCodeCamp 频道上一段热门 YouTube 视频的示例。如果你想在预览窗口中观看不同的视频，请将 src 属性的值更改为你选择的视频。要查看预览，你需要启用交互式编辑器。

注意：不用担心交互示例中提到的那些额外属性，比如 referrerpolicy 和 allowfullscreen。你将在以后的工作坊中学习更多关于使用 iframe 元素的内容。

另一个常见的 iframe 元素用例是将地图嵌入页面。下面是一个嵌入地图的示例。

启用交互式编辑器，尝试通过放大 / 缩小来操作地图本身。

该元素本身会被外部对象（即该站点）替换。你的 CSS 可以改变嵌入站点的位置，但你无法修改该站点的内容。进一步说明，如果被嵌入的站点有一个 h1 元素，你的 CSS 将不能为该 h1 元素设置样式。你无法更改其大小、字体颜色等。

还有一些其他的替换元素，例如 video 和 embed。有些元素在特定情况下也会表现为替换元素。以下是一个将 type 属性设置为 image 的 input 元素示例：

这种类型的 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 徽标的绝对路径示例：

示例代码

在此示例中，协议是 https，域名是 design-style-guide.freecodecamp.org ，文件名是 fcc_secondary_small.svg。

那么，如果你想用绝对路径链接的资源在你的本地机器上该怎么办？以下是如何用绝对路径链接到 about.html 文件：

示例代码

看起来是这样的，因为我们先进入名为 Users 的文件夹，然后进入名为 user 的文件夹，再进入名为 Desktop 的文件夹，然后进入名为 fCC 的文件夹，再进入名为 script-code 的文件夹，然后进入名为 absolute-vs-relative-paths 的文件夹，再进入名为 pages 的文件夹，最终获得 about.html 文件。

下面是在浏览器地址栏中绝对 URL 的样子：

示例代码

该 URL 包含协议 file://。它还包含路径，看起来像这样： /Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/ ，表示通向该文件的一系列文件夹。最后，它还包含 about.html，即文件名和扩展名。

现在，我们来看看相对路径。相对路径指定文件相对于当前文件所在目录的位置。它不包含协议或域名，因此对于同一网站内部链接而言更短、更灵活。下面是在同一文件夹中的 contact.html 页面链接到 about.html 页面 的示例：

示例代码

所以想象你在 contact.html 页面，并且由于 about.html 页面位于相同位置，你只需获取文件名。这是使用相对文件路径的一个例子。

那么，你应该在何时使用哪种路径；绝对路径还是相对路径？以下是你应遵循的规则：

• 在链接到托管于外部网站的资源时使用绝对路径。
• 当你需要链接到的页面或资源无论文档在站点内的何处都能一致地工作时，请使用绝对路径。
• 在链接同一网站内的资源时，请使用相对路径。
• 如果你希望在开发过程中保持代码更清晰、更易维护，请使用相对路径。
• 在本地测试期间使用相对路径，以确保链接在无互联网连接时也能工作。

# 路径语法中的斜杠、单点和双点有什么区别？

你可能见过像 /public/logo.png、./script.js 或 ../styles.css 这样的链接。但这些特殊类型的链接是什么意思？这些称为文件路径。有三种关键语法需要了解。首先是斜杠，根据你的操作系统可以是反斜杠（\）或正斜杠（/）。第二是单点（.）。最后是双点（..）。

斜杠被称为 “路径分隔符”。它用于表示文件夹或文件名之间的分隔。这样你的计算机就知道 naomis-files/ 指向同名的目录，而 naomis/files/ 指向 naomis 目录下的 files 目录。

单点指向当前目录，双点指向父目录。你通常会看到使用单点来确保路径被识别为相对路径。记住你在前一课中学过的相对路径与绝对路径的区别。

然而，双点在访问当前工作目录外的文件时更为常见。

例如，给定此文件树：

示例代码

如果你的 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。

现在你应该知道如何在为页面中的链接添加个人风格的同时，仍然提供用户需要的关于每个链接状态的重要信息。

# HTML 基础复习

HTML 基础
HTML 的作用 ：HTML 表示网页的内容和结构。
HTML 元素 ：元素是 HTML 文档的构建块。它们表示标题、段落、链接、图像等。大多数 HTML 元素由一个起始标签（<elementName>）和一个结束标签（</elementName>）组成。
以下是基本语法：

示例代码

空元素 ：空元素不能包含任何内容，只能有开始标签。示例包括 img 和 meta 元素。
示例代码

在某些代码库中常见在空元素内包含一个正斜杠 /。这两种写法都是可接受的：

示例代码

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

布尔属性是一种在 HTML 标签中可以存在或不存在的属性。如果存在，其值为 true，否则为 false。布尔属性的例子包括 disabled、readonly 和 required。

注释 ：注释用于在代码中为自己或其他开发者留下说明。以下是 HTML 注释的语法：
示例代码

常见的 HTML 元素
标题元素 ：HTML 中有六个标题元素。h1 到 h6 标题元素用于表示其下方内容的重要性。数字越小，重要性越高，因此 h2 元素的重要性低于 h1 元素。
示例代码

段落元素 ：用于网页中的段落。
示例代码

img 元素 ：img 元素用于向网页添加图像。src 属性用于指定该图像的位置。对于图像元素，最好包含另一个名为 alt 的属性。下面是一个同时包含 src 和 alt 属性的 img 元素示例：
示例代码

body 元素 ：此元素用于表示 HTML 文档的内容。
示例代码

section 元素 ：此元素用于将内容划分为更小的部分。
示例代码

div 元素 ：该元素是一个通用的 HTML 元素，不包含任何语义信息。它用作通用容器以承载其他 HTML 元素。
示例代码

锚点（a）元素 ：这些元素用于在网页上创建链接。href 属性用于指定用户点击链接时应跳转到的位置。
示例代码

无序（ul）和有序（ol）列表元素 ：要创建带项目符号的项目列表，应使用 ul 元素，并在其内部嵌套一个或多个 li 元素，如下所示：
示例代码

要创建有序的项目列表，应使用 ol 元素：

示例代码

强调（em）元素 ：用于对一段文本施加强调。
示例代码

重要强调（strong）元素 ：此元素用于对文本施加强烈强调，以表示紧迫性和严重性。
示例代码

figure 与 figcaption 元素 ：figure 元素用于对图像和图表等内容进行分组。figcaption 元素用于在 figure 元素内表示该内容的说明文字。
示例代码

main 元素 ：该元素用于表示网页的主要内容。
footer 元素 ：该元素放置在 HTML 文档的底部，通常包含版权信息和其他重要页面链接。
示例代码

标识符与分组
ID：HTML 元素的唯一标识符。ID 名称在每个 HTML 文档中只能使用一次。
示例代码

ID 名称不能包含空格。如果你的 ID 名称由多个单词组成，可以在单词之间使用连字符，像这样：

示例代码

类（Classes）：类用于将元素分组以便进行样式和行为处理。
示例代码

与 ID 不同，您可以在整个 HTML 文档中重复使用相同的 class 名称。class 的值也可以包含空格，例如：

示例代码

特殊字符与链接
HTML 实体 ：HTML 实体或字符引用是一组用于表示 HTML 中保留字符的字符。示例包括和号（&）符号和小于号（<）。
示例代码

link 元素 ：此元素用于链接到外部资源，如样式表和站点图标。以下是用于外部 CSS 文件的 link 元素的基本语法：
示例代码

rel 属性用于指定被链接资源与 HTML 文档之间的关系。href 属性用于指定外部资源的 URL 位置。

script 元素 ：此元素用于嵌入可执行代码。
示例代码

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

示例代码

src 属性在此用于指定该外部 JavaScript 文件的位置。

模板和编码
HTML 样板 ：这是包含每个 HTML 文档所需的基本结构和必要元素的样板。
示例代码

DOCTYPE：用于告知浏览器您正在使用哪个版本的 HTML。
html 元素 ：表示 HTML 文档的顶层元素或根元素。要为文档指定语言，应使用 lang 属性。
head 元素 ：head 部分包含重要的元数据，这些是在浏览器和搜索引擎所需的后台信息。
meta 元素 ：这些元素表示站点的元数据。它们包含诸如字符编码、以及像 Twitter 这样的站点应如何预览您页面链接等详细信息。
title 元素 ：该元素用于设置显示在浏览器标签或窗口中的文本。
UTF-8 字符编码 ：UTF-8，即 UCS 转换格式 8，是一种在网络上广泛使用的标准化字符编码。字符编码是计算机将字符作为数据存储的方法。charset 属性用于在 meta 元素内将字符编码设置为 UTF-8。
SEO 与社交分享
SEO：搜索引擎优化是一种优化网页的做法，旨在提高其在搜索引擎上的可见性并获得更高的排名。
Meta（description）元素 ：用于为网页提供简短描述并影响 SEO。
示例代码

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

og:title 属性 ：用于设置在社交媒体帖子中显示的标题。
示例代码

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

og:image 属性 ：用于设置在社交媒体帖子中显示的图片。
示例代码

og:url 属性 ：用于设置社交媒体帖子中用户点击的 URL。
示例代码

媒体元素与优化
替换元素 ：替换元素是其内容由外部资源决定而非由 CSS 本身决定的元素。一个例子是 iframe 元素。iframe 代表内联框架（inline frame）。它是一个内联元素，用于在 HTML 页面中直接嵌入其他 HTML 内容。
示例代码

您可以包含 allowfullscreen 属性，允许用户将 iframe 以全屏模式显示。

示例代码

要在 iframe 中嵌入视频，您可以直接从 YouTube、Vimeo 等流行视频服务复制，或通过将 src 属性指向该视频的 URL 来自行定义。下面是一个从 YouTube 嵌入 freeCodeCamp 热门课程的示例：

示例代码

还有一些其他的替换元素，例如 video 和 embed。有些元素在特定情况下也会表现为替换元素。以下是一个将 type 属性设置为 image 的 input 元素示例：

示例代码

优化媒体 ：在网页中使用媒体（如图像）时，有三项工具需要考虑：尺寸、格式和压缩。压缩算法用于减小文件或数据的体积。
图像格式 ：两种最常见的文件格式是 PNG 和 JPG，但它们已不再是提供图像的最佳格式。除非需要支持较旧的浏览器，否则应考虑使用更优化的格式，如 WEBP 或 AVIF。
图片许可 ：处于公有领域的图像不附带版权，可以无限制地使用。特别以 Creative Commons 0 许可证授权的图像被视为公有领域。有些图像可能以宽松许可发布，例如 Creative Commons 许可证或 freeCodeCamp 使用的 BSD 许可证。
SVG：可缩放矢量图形（Scalable Vector Graphics）基于路径和方程来跟踪数据以绘制点、线和曲线。其真正含义是，像 SVG 这样的矢量图可以缩放到任意尺寸而不影响质量。

多媒体集成
audio 和 video 元素 ：audio 和 video 元素允许你在 HTML 文档中添加音频和视频内容。audio 元素支持常见的音频格式，如 mp3、wav 和 ogg。video 元素支持 mp4、ogg 和 webm 格式。
示例代码

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

示例代码

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

loop 属性 ：loop 属性是一个布尔属性，使音频连续重播。
示例代码

muted 属性 ：当出现在 audio 元素中时，布尔属性 muted 会使音频以静音状态开始播放。
示例代码

source 元素 ：对于音频文件类型，不同浏览器对各类型的支持存在差异。为适应这种情况，你可以在 audio 元素内使用多个 source 元素，浏览器会选择第一个其能识别的来源。下面是为 audio 元素使用多个 source 元素的示例：
示例代码

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

示例代码

poster 属性 ：如果你想在视频下载时显示一张图片，可以使用 poster 属性。此属性不适用于 audio 元素，仅适用于 video 元素。
示例代码

目标属性类型
target 属性 ：此属性告诉浏览器在何处打开锚点元素的 URL。该属性有四个重要的可能值：_self、_blank、_parent 和 _top。还有第五个值，称为 _unfencedTop，目前用于实验性的 FencedFrame API。你现在大概还不需要使用它。
_self 值 ：这是 target 属性的默认值。它在当前浏览上下文中打开链接。在大多数情况下，这将是当前标签页或窗口。
示例代码

_blank 值 ：在新的浏览上下文中打开链接。通常这会在新标签页中打开，但有些用户可能将浏览器配置为改为在新窗口中打开。
示例代码

_parent 值 ：在当前上下文的父级中打开链接。例如，如果你的网站包含一个 iframe，则该 iframe 中的 _parent 值会在你网站所在的标签 / 窗口中打开，而不是在嵌入的框架内打开。
示例代码

_top 值 ：在最顶层的浏览上下文中打开链接 —— 可以理解为 “父的父级”。这与 _parent 类似，但无论嵌套多少层嵌入框架，链接都会始终在完整的浏览器标签 / 窗口中打开。
示例代码

绝对路径 vs 相对路径
路径定义 ：路径是一个字符串，用于指定文件系统中某个文件或目录的位置。在网页开发中，路径让开发者能够链接到资源，例如图像、样式表、脚本和其他网页。
路径语法 ：有三种关键语法需要了解。第一个是斜杠，根据你的操作系统可以是反斜杠（\）或正斜杠（/）。第二个是单点（.）。最后是双点（..）。斜杠被称为 “路径分隔符”，用于表示文件夹或文件名之间的分隔。单点表示当前目录，两个点表示父目录。
示例代码

绝对路径 ：绝对路径是指向资源的完整链接。它从根目录开始，包含每一级子目录，最后是文件名和扩展名。“根目录” 指的是层级结构中的顶级目录或文件夹。绝对路径还包含协议 —— 可能是 http、https 或 file—— 以及当资源位于网络上时的域名。下面是一个链接到 freeCodeCamp 徽标的绝对路径示例：
示例代码

相对路径 ：相对路径指定文件相对于当前文件所在目录的位置。它不包含协议或域名，因此在同一网站内部链接时更简短、更灵活。下面是一个示例，展示如何从位于同一文件夹中的 contact.html 页面链接到 about.html 页面：
示例代码

链接状态
:link：这是默认状态。该状态表示用户尚未访问、点击或与之交互的链接。你可以把此状态视为为页面上所有链接提供基础样式。其他状态都在此基础上扩展。
:visited：当用户已访问被链接到的页面时应用此状态。默认情况下，这会将链接变为紫色 —— 但你可以使用 CSS 为用户提供不同的视觉提示。
:hover：当用户将光标悬停在链接上时应用此状态。此状态有助于为链接提供额外的注意力，以确保用户确实打算点击它。
:focus：当链接获得焦点时应用此状态。
:active：此状态适用于正在被用户激活的链接。通常指在大多数情况下通过主鼠标按钮（左键）点击该链接来激活。