处理文件

操作文件和文件夹

有许多不同的方法可以在计算机上创建和编辑文件和文件夹。你可以通过计算机的命令行/终端使用一系列文本命令来完成，你将在下一篇文章中了解更多信息。然而，许多人发现通过视觉方式开始学习文件系统更容易，这也是我们在这里要讨论的。现代操作系统 (OS) 具有强大的文件系统用户界面 (UI)，你可以根据需要使用它来操作文件和文件夹。

例如，在 macOS 上，你有 Finder 程序

而 Windows 有文件资源管理器

基本结构

大多数现代操作系统都有一个 Users 文件夹，其中包含系统中每个用户帐户的文件夹，也称为用户的主文件夹。它通常用一个房屋图标表示，以便更容易找到。反过来，主文件夹将包含与该用户相关的其他重要标准文件夹（和文件），例如文档、音乐等。你的计算机上还有许多其他文件和文件夹，但现在不用担心这些。

当前登录的用户默认只能访问其自己的主文件夹。

你应该将与你的工作相关的项目文件创建在你的主文件夹中的某个位置，例如文档中。这很有意义，因为网页文件通常被称为文档。

创建文件夹

让我们创建一个新文件夹来存储所有我们的网页项目。

1. 在你的文件系统 UI 中，点击你的主文件夹，然后双击你的文档文件夹。
2. 在此位置创建一个名为 web-projects 的新文件夹
   1. 在 Windows 上，可以通过选择文件资源管理器窗口中的新建按钮并选择文件夹（或按 Ctrl + Shift + N），然后输入 web-projects 作为出现的新文件夹图标的名称，再按 Enter/Return 来完成。
   2. 在 macOS 上，可以通过在 Finder 菜单中选择文件 > 新建文件夹（或按 Cmd + Shift + N）来完成——你会看到一个名为无标题文件夹的新文件夹出现。点击文件夹名称开始编辑它，输入 web-projects，然后按 Enter/Return。

如果你打错了字，可以编辑文件夹名称进行更正（这也适用于文件）

• 在 Windows 上，右键点击文件夹，从菜单中选择重命名，然后编辑它。某些 Windows 版本最初会显示一个简化菜单——你可能需要右键点击，然后选择显示更多选项，再选择重命名！
• 在 macOS 上，点击/选择文件夹名称进行编辑。

在 VS Code 中打开项目文件夹并创建文件

虽然你可以在操作系统文件系统 UI 中创建文本文件，但在代码编辑器中创建它们通常更容易且不易出错。事实上，VS Code 有自己的文件资源管理器，允许你为你的网页项目创建所需的所有文件夹和文件。

那么我们为什么要让你费劲地使用操作系统文件系统 UI 创建文件夹呢？因为 VS Code 需要指向一个初始的顶级文件夹！

了解一些操作系统文件系统的结构也很有用。当你以后开始使用更复杂的工具时，这会变得更加有用。

现在让我们在 VS Code 中打开我们的 web-projects 文件夹。

1. 打开 VS Code。
2. 从菜单中选择文件 > 打开文件夹...。

   注意： 如果你是键盘用户，在 Windows 中可以通过按住 Ctrl 键然后按 K 再按 O 来运行打开文件夹命令。macOS 用户最简单的方法是使用 Cmd + Shift + P 打开命令面板，输入“Open Folder”来筛选命令列表，使用光标键向下移动到文件：打开文件夹，然后按 Enter。

3. 一个迷你版的操作系统文件系统 UI 将出现。使用它找到你的 web-projects 文件夹，选中它，然后按选择文件夹按钮。
4. 你将看到一个名为你信任此文件夹中文件的作者吗？的对话框。仔细阅读以了解其内容。目前，你将是唯一在此文件夹中创建文件的人，因此你可以点击是的，我信任作者。

你应该会看到你的 web-projects 文件夹在 VS Code 的资源管理器窗格中打开，如下图所示

关于 VS Code 键盘导航的插曲

VS Code 虽不完美，但拥有一套广泛的键盘快捷键。在本文中，我们尝试尽可能包含有用的快捷键，但你可以在 VS Code 键盘快捷键参考中找到更全面的列表。

一般来说，如果你想通过键盘导航 VS Code，你可以按 Tab 键在 UI 的不同区域之间移动（Shift + Tab 将你移动到上一个 Tab 焦点位置）。如果一个 Tab 焦点位置有多个按钮，你可以使用光标键在它们之间移动。

如果你当前正在编辑文件，Tab 键不会在 UI 中导航——它会在文件中添加制表符。要从正在编辑的文件中移出到资源管理器窗格，在 macOS 上你可以按 Cmd + Shift + E，在 Windows 上则按 Ctrl + Shift + E。

要返回文件编辑器窗格并开始在不同选项卡中打开的不同文件之间移动，请按住 Ctrl 键并使用 Tab 和 Shift + Tab 在打开的选项卡列表中上下移动（在 macOS 和 Windows 上都是）。突出显示要编辑的文件后，释放按键即可移动到该选项卡。

创建文件

从这里，你可以使用资源管理器窗格顶部的相关按钮创建新文件和文件夹。

1. 点击新建文件...图标（或 Tab 到它并按 Enter/Return）来创建新文件。
2. 在出现的文本输入框中输入文件名“index.html”，然后按 Enter/Return。

此时，返回到你的操作系统文件系统 UI，双击进入你的 web-projects 文件夹，你应该也会在那里看到你的 index.html 文件。VS Code 正在使用底层的操作系统文件系统，而不是使用它自己的一些奇怪的文件系统。

将 index.html 移动到其自己的子文件夹

你可以在其他文件夹（称为子文件夹）中创建文件夹，深度可以任意多层。你还可以通过拖放文件（和文件夹）到另一个文件夹中来移动它们。

让我们探索这一点，并在此过程中，将我们的 index.html 文件移动到它自己的子文件夹中。我们不希望它放在主 web-projects 文件夹中。

1. 在 web-projects 内部创建一个新文件夹，使用 VS Code 资源管理器窗格的新建文件夹...按钮。
2. 将其命名为 test-site。
3. 现在你应该可以将 index.html 文件拖放到 test-site 文件夹上，以将文件移动到该文件夹中。

   注意： 如果你是键盘用户，可以按照以下步骤操作

   1. 使用向上和向下箭头键将焦点轮廓移动到 index.html 文件上。
   2. 在 macOS 上按 Cmd + X（在 Windows 上按 Ctrl + X）选择文件进行移动。
   3. 使用箭头键将焦点轮廓移动到文件夹上。
   4. 在 macOS 上按 Cmd + V（在 Windows 上按 Ctrl + V）将文件移动到该文件夹中。

关于使用操作系统文件系统 UI 和 VS Code，我们还有很多可以介绍的，但我们篇幅有限，所以暂时就到这里。这为你提供了足够的信息来入门，我们鼓励你搜索网络以获取有关如何对文件和文件夹执行其他操作的信息。

接下来我们简要讨论一下网站结构。

网站应该有什么结构？

当你在本地（在你的计算机上）处理网站时，你应该将每个网站的所有相关文件保存在一个文件夹中。反过来，你应该将所有网站文件夹保存在一个中心文件夹中，以便它们都易于查找。

在本文前面，我们指导你创建了一个名为 web-projects 的中心文件夹来存储你所有的网站项目。我们还让你创建了一个名为 test-site 的子文件夹，其中包含一个空的 index.html 文件。

让我们在 test-site 中添加更多功能来演示典型的网站结构；在下一个模块中，我们将让你在其中构建一个完整的网站示例。任何网站项目最常见的内容是索引 HTML 文件以及包含图像、样式文件和脚本文件的文件夹

1. index.html：这个文件通常包含你的主页内容，也就是人们首次访问你的网站时看到的文本和图像。
2. images 文件夹：这个文件夹将包含你在网站上使用的所有图像。
3. styles 文件夹：这个文件夹将包含用于样式化内容的 CSS 代码（例如，设置文本和背景颜色）。
4. scripts 文件夹：这个文件夹将包含所有用于为你的网站添加交互功能的 JavaScript 代码（例如，定义点击按钮时发生的事情）。

你现在应该已经在 test-site 中有一个 index.html 文件了。现在在其中创建 images、styles 和 scripts 文件夹。

文件名

文件名通常分为两部分——**名称**和**扩展名**。以我们上面创建的文件 index.html 为例。

• 在这种情况下，名称是 index。文件名通常可以包含你喜欢的任何字符，尽管不同的计算机系统对可使用的字符会有各种限制。最好从数字和字母开始。此外，系统可能会对某些名称或名称的某些部分赋予特殊含义——正如我们已经说过的，index 文件往往被认为是网站的主要主页文件。
• 文件扩展名标识了我们正在处理的文件类型，计算机系统使用它来识别文件中预期的内容类型、应该使用哪个程序打开文件等。在这种情况下，扩展名是 .html，这意味着文件应该包含纯文本，更具体地说，是 HTML 代码。由于扩展名，你的计算机知道当你尝试打开该文件时，它应该使用你的默认文本编辑器打开它，如果你一直按照我们的说明操作，那应该就是 VS Code。

并非所有情况都是如此，但大多数文件需要扩展名才能正确处理。删除或更改文件扩展名很可能会导致错误，因此除非你确实知道自己在做什么，否则不应更改它。

在 Windows 计算机上，你可能很难看到某些文件的扩展名，因为 Windows 默认启用了**隐藏已知文件类型的扩展名**选项。你可以通过进入文件资源管理器，选择**文件夹选项…**选项，取消勾选**隐藏已知文件类型的扩展名**复选框，然后点击**确定**来关闭此功能。有关你 Windows 版本的更具体信息，你可以在网上搜索。

文件命名最佳实践

在学习本课程的过程中，你会注意到我们总是要求你将文件夹和文件完全用小写字母命名，不带空格。有很多情况下，忽略此建议会导致问题——一些更常见的问题如下：

1. 许多计算机系统，包括大多数网络服务器，都区分大小写。例如，如果你在网站上放置一张图片在 test-site/images/MyImage.jpg，然后在另一个文件中尝试用 test-site/images/myimage.jpg 引用该图片，它可能无法工作。
2. 当你在命令行上调用命令时，你必须用引号将带有空格的文件名括起来，否则它们将被解释为两个单独的项目。
3. 某些编程语言（例如 Python）在某些情况下（例如，如果这些文件是需要导入的模块）对文件名中的空格处理不好。
4. 文件名通常映射到网址/URL。例如，如果你的服务器根文件夹中有一个名为 my file.html 的文件，通常可以通过 https://example.com/my%20file.html 这样的 URL 访问它。Web 服务器通常会将文件名中的空格替换为 %20（因为 URL 是百分比编码的），如果某些系统假设文件名和 URL 完美匹配，这可能会导致一些细微的错误。

为了代替空格，许多开发人员使用连字符（-）等分隔符，而不是空格——例如 my-file.html 而不是 my file.html。这是一个好习惯。

最好养成将文件夹和文件名称写成小写，不带空格，并用连字符分隔单词的习惯，至少在你了解自己在做什么之前。这样，你以后会遇到更少的问题。

文件路径

要从一个文件引用另一个文件，你必须提供一个文件路径——基本上是一条路线，以便一个文件知道另一个文件在哪里。例如，当创建一个包含图像的网页时，你的网页代码将需要包含一个文件路径，指示你要显示的图像的位置。

让我们通过一个基本示例来演示这一点。你可能暂时不明白这意味着什么，但没关系。

1. 在网上搜索你喜欢的图片（例如，使用 Google 图片等服务）并下载。或者，你也可以直接获取我们的 Firefox 图标图片用于此示例。
2. 将图片放入你的images文件夹中。
3. 确保图像文件名简短、简单，不含空格。例如，firefox-icon.png 很好，cat.jpg 很好，但 efregre^%^£$£@%$^&YTJgfbgfdgt54656756_ertgrth-rtgtfghhyj.png 不好。此外，请确保保留文件扩展名。

现在我们将在 index.html 文件中添加内容，以使其能够定位图像文件并显示它。

1. 在 VS Code 中打开你的 index.html，并将以下内容完全按照所示插入文件中。这是 HTML，我们用来定义和构建网页内容的语言。你很快就会学到更多关于它的知识！

   html

   <!doctype html>
   <html lang="en-US">
     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width" />
       <title>My test page</title>
     </head>
     <body>
       <img src="" alt="My test image" />
     </body>
   </html>
   

2. <img src="" alt="My test image"> 这一行是插入图像到页面中的 HTML 代码。我们需要告诉 HTML 图像在哪里。图像在 images 文件夹中，该文件夹与 index.html 位于同一文件夹。要从 index.html 沿文件结构向下找到我们的图像，所需的文件路径是 images/你的图片文件名。例如，如果你的图像名为 firefox-icon.png，文件路径将是 images/firefox-icon.png。

3. 将文件路径插入到你的 HTML 代码中 src="" 的双引号之间。

4. 保存你的 HTML 文件，然后在你的网页浏览器中加载它。你可以通过 Ctrl/右键点击 HTML 文件，然后选择打开方式并从弹出的子菜单中选择一个网页浏览器来完成此操作。你也可以在同一个屏幕上打开你的文件系统 UI 和一个网页浏览器窗口，然后将 HTML 文件拖放到网页浏览器窗口的顶部。

你应该会看到一个显示你的图片的基本网页！

文件路径的一般规则

• 要链接到与调用 HTML 文件位于同一文件夹中的目标文件，只需使用文件名，例如 my-image.jpg。
• 要引用子文件夹中的文件，请在路径前面加上文件夹名称和斜杠，例如 subfolder/my-image.jpg。
• 要链接到位于调用 HTML 文件**上方**文件夹中的目标文件，请写入两个点。因此，例如，如果 index.html 位于 test-site 的子文件夹中，而 my-image.jpg 位于 test-site 中，你可以使用 ../my-image.jpg 从 index.html 引用 my-image.jpg。
• 你可以根据需要任意组合这些，例如 ../subfolder/another-subfolder/my-image.jpg。

• 上一页
• 概述：环境设置
• 下一页