一个网站由文本、代码、样式表、媒体内容等等的各种文件组成。当你开发网站时，你需要以清晰的结构将它们存储在你的本地计算机中，保证这些文件之间的联系，使它们看起来正确，然后才能将它们上传至服务器 。本节将会讨论一些你需要注意的问题，这样你就能创建清晰的文件结构。
网站应该存放在计算机何处？
当你在你自己的本地计算机操作你的网站时，你应该将所有关联的文件放在一个能反映服务器上文件结构的单独的文件夹里。这个文件夹可以存放在任何你喜欢的位置，不过你应该将它放在你容易找到的位置，或许可以是你的桌面，你的主页，或是磁盘根目录。
- 选择一个位置存放你的网站项目。创建一个文件夹（在本文中，我们将其命名为
"网站项目"）。这将是你所有网站项目存放的位置。 - 在该文件夹里新建另一个文件夹来存放你的第一个网页。在本文中，我们将其命名为
"测试网站"（或者其它更有想象力的名称）。
一些关于大小写和空格的提示
你会注意到，文中所有的文件夹名和文件都使用小写字母，且没有空格。这是因为：
- 很多计算机，特别是网站服务器，是对大小写敏感的。举个例子，如果你将一张图片放在
"测试网站/Tp.png"，然后在一个不同的文件里你试图以"测试网站/tp.png"引用这张图片，这将不会起作用。 - 浏览器，网站服务器，还有编程语言不能一致处理空格。举个例子，如果你在文件名里使用空格，一些系统会把它这个文件名视为两个文件名。一些服务器将会把你的文件名里的空格替换为 “%20”（统一资源标识(URI)里空格的编码），破坏你所有的链接。最好使用横线，而不是下划线来分离单词：对比
"图-片.png"和"图_片.png"。
简单地说，你应该在文件名中使用连字符。搜索引擎把连字符当作一个词的分隔符， 但不会以这种方式处理下划线。基于这些原因，至少在你知道自己在做什么之前，最好养成在文件夹和文件名中使用小写，并且使用短横线而不是空格来分隔的习惯。这样可以避免你在以后碰到一些问题。
网站应该使用什么结构？
接下来，看看我们的测试网站应该拥有什么结构。我们从网站模版创建网站项目，网站项目中最常使用的就是一个名为”码”的文件夹。让我们现在创建它们：
门.程：这个文件程序的入口。码文件夹 ：这个文件夹包含你网页上所有使用的代码和图像。
文件路径
为了关联不同文件，你需要为它们提供文件路径——基本上是一个路线让一个文件知道另一个文件在哪。为了实现，我们将插入一小段代码到 门.程 文件，让其显示你在你的网站看起来是什么样的？ 文章里选择的图像。
- 复制你之前保存的图像到
"图像"文件夹。 - 打开
"门.程"文件，准确插入以下代码。现在不理解代码的意义也不用担心——我们将在以后详细讲解此结构的信息。
引 * 作 回应 自 '回应';
引 {绘制} 自 '回应-模';
引 样式 自 '样式-组件';
定 题1 = 样式.题1``;
定 根 = 样式.容``;
定 像 = 样式.像``;
类 应用 承 回应.组件 {
绘制() {
回 (
<根>
<题1>{'世界, 你好!'}</题1>
<像 源={需('./图像/君兔.png')} />
</根>
)
}
}
绘制(<应用/>, 文档.查选('#根'));
- 这行代码
<像 源={需('./图像/君兔.png')} />是在页面里插入图像的 代码。我们需要告诉 代码 图像在哪里。这张图片在 图像 目录下，而 图像 目录与门.程处于同级目录。要从门.程所处一级目录进入图片所在目录，我们所需的文件路径是./图像/你的图像文件名。例如，我们的图像叫做君兔.png，所以文件路径就是./图像/君兔.png。 - 在 代码里
源={需('./图像/君兔.png')}的双引号中插入文件路径。 - 保存文件，编译、运行。你应该看到展示着你的图像的新网页！
一些文件路径的通用规则：
- 要引用一个位于调用的 代码 文件同级目录的目标文件，只需直接使用文件名，比如
./我的图像.jpg。 - 要引用一个子目录的文件，在路径前写下目录名并加一个斜杠，比如
./子目录/我的图像.jpg。 - 要引用一个位于调用的 代码 文件的父级目录的目标文件，加上两个点。举个例子，如果
门.程在测试网站下面的一个子目录而我的图片.png在测试网站目录，你可以在门.程里使用../我的图片.png引用我的图片.png。 - 你可以随意组合以上方法，比如
../子目录/又一子目录/我的图片.png.
到此为止，这就是你需要知道的全部内容。
提示：视窗(Windows)文件系统会使用反斜杠而不是斜杠，比如 C:\windows 。这在 代码 里没什么关系，就算你在 视窗（Windows） 上开发你的网页，你仍应该在你的代码中使用斜杠。
还有什么要做的？
我们差不多都做完了。你的文件夹结构应该像这样：
参考
- MDN 文件处理