--- title: 处理文件 slug: Learn/Getting_started_with_the_web/Dealing_with_files tags: - HTML - 初学者 - 指南 - 文件 - 理论 - 网站 translation_of: Learn/Getting_started_with_the_web/Dealing_with_files ---

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

网站由文本、代码、样式表、媒体内容等多种文件组成。构建站点时要确保文件夹结构组织合理，文件之间交互畅通，没有明显错误，然后再上传至服务器。本节将讨论组织网站文件要注意的一些问题。

网站应该保存在何处？

对于本地网站，应将所有相关文件放在一个单独文件夹中，可以映射出服务器端站点文件结构。文件夹存在哪儿都可以，只要容易找到，比如桌面、用户家目录，或是系统根目录。

确定网站项目储存位置。在该位置下创建一个文件夹（比如 web-projects）。所有网站项目都存在一处。
在这个文件夹里再新建一个文件夹（比如 test-site，读者可自由发挥想象），来存放第一个网站。

关于大小写和空格的提示

你会注意到，文中所有的文件夹名和文件都使用小写字母，且没有空格。这是因为：

很多计算机，特别是 Web 服务器，是对大小写敏感的。比如，如果你保存一张图片 test-site/MyImage.jpg，然后在另一处试图以 test-site/myimage.jpg 访问这张图片，可能会失败。
浏览器、Web 服务器，还有编程语言处理空格的方式不一致。比如，一些系统会将包含空格的文件名其视为两个。一些服务器将会把文件名里的空格替换为 “%20”（URI 里空格的编码），从而使链接遭到破坏。最好使用中划线，而不是下划线来分离单词：对比 my-file.html 和 my_file.html 。

简言之，文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符，但不会识别下划线。基于此，最好在一开始就养成习惯，文件夹和文件名使用小写，用短横线而不是空格来分隔。可以避免许多问题。

网站应该使用什么结构？

下面来看看测试网站应该使用什么结构。最基本、最常见的结构是：一个主页、一个图片文件夹、一个样式表文件夹和一个脚本文件夹：

index.html ：这个文件一般包含主页内容，即用户第一次访问站点时看到的文本和图像。使用文本编辑器在 test-site 文件夹中新建 index.html。
images 文件夹 ：这个文件夹包含站点中的所有图像。在 test-site 文件夹中新建 images 文件夹。
styles 文件夹 ：这个文件夹包含站点所需样式表（比如，设置文本颜色和背景颜色）。在 test-site 文件夹中新建一个 styles 文件夹。
scripts 文件夹 ：这个文件夹包含提供站点交互功能的 JavaScript 代码（比如读取数据的按钮）。在 test-site 文件夹中新建一个 scripts 文件夹。

注：Windows 中查看完整文件名有点小麻烦，因为 Windows 默认开启“隐藏已知文件类型扩展名”选项。在 Windows 8/10 中，可以打开资源管理器，选择“查看”选项卡，在“显示/隐藏”列中，选中“文件扩展名”复选框。其它 Windows 版本操作方法可在网上搜索。

文件路径

为使文件间正常交互，应为每个文件提供访问路径，让一个文件知道另一个文件的位置。作为演示，我们在 index.html 文件中插入一小段 HTML，让其显示设计网站外观小节中的火狐图案。

将火狐图案保存到 images 文件夹。

打开 index.html 文件，粘贴以下代码。现在看不懂不用担心，以后会慢慢讲解。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试页面</title>
  </head>
  <body>
    <img src="" alt="我的测试页面">
  </body>
</html>

<img src="" alt="我的测试页面"> 是在页面里插入图像的 HTML 代码。我们需要告诉 HTML 图像的位置。这张图片在 images 目录下，而 images 目录与 index.html 处于同级目录。要从 index.html 所处一级目录进入图片所在目录，所需的文件路径是 images/image-filename.png 。例如，这里的图像叫做 firefox-icon.png ，所以文件路径就是 images/firefox-icon.png 。
在 HTML 代码里 src＝"" 的双引号中插入文件路径。
保存 HTML 文件，然后使用浏览器打开（双击文件）。火狐图案显示出来了！

基础网页截图，FireFox 标志：一只盘旋在地球上的火狐

文件路径的一些通用规则：

若引用的目标文件与 HTML 文件同级，只需直接使用文件名，比如 my-image.jpg 。
要引用子文件夹中的文件，要在路径前写下目录名并加一个斜杠，比如 subdirectory/my-image.jpg 。
若引用的目标文件位于 HTML 文件的上级，需要加上两个点。比如，如果 index.html 在 test-site 下面的一个子目录而 my-image.png 在 test-site 目录，你可以在 index.html 里使用 ../my-image.png 引用 my-image.png 。
以上方法可以随意组合，比如 ../subdirectory/another-subdirectory/my-image.png。

注：Windows 文件系统使用反斜杠而不是正斜杠，比如 C:\Windows 。但与 HTML 没什么关系，即使在 Windows 上做 Web 开发，代码中仍应使用正斜杠。

大功告成。现在站点文件夹结构应该类似于：

macOS 访达呈现的文件夹结构，包含1个图像文件夹（包含1幅图案）、1个样式表文件夹、1个脚本文件夹、1个主页

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

网站应该保存在何处？

关于大小写和空格的提示

网站应该使用什么结构？

文件路径

本章目录