处理文件
+ 查看更多

发布日期：2022-04-01

处理文件

以前的
概述:开始使用web
下一个

一个网站由许多文件组成:文本内容、代码、样式表、媒体内容等等。当你建立一个网站时，你需要在你的本地计算机上把这些文件组装成一个合理的结构，确保它们可以相互交谈，并在你最终之前让所有的内容看起来正确将它们上传到服务器．处理文件讨论一些你应该知道的问题，这样你就可以为你的网站建立一个合理的文件结构。

你的网站应该放在电脑的什么位置?

当您在本地计算机上处理一个网站时，应将所有相关文件保存在一个文件夹中，该文件夹反映了服务器上发布的网站的文件结构。这个文件夹可以放在你喜欢的任何地方，但你应该把它放在你容易找到的地方，可能在你的桌面，在你的家庭文件夹，或在你的硬盘的根目录。

选择一个地方来存储你的网站项目。在您选择的位置中，创建一个新文件夹，名为web项目(或类似的)。这是所有你的网站项目将居住的地方。
在第一个文件夹中，创建另一个文件夹来存储你的第一个网站。叫它试验场地(或者更有想象力的东西)。

关于套管和间距的一个问题

您会注意到，在本文中，我们要求您将文件夹和文件命名为完全小写，不包含空格。这是因为:

许多计算机，特别是网络服务器，是区分大小写的。举个例子，如果你在你的网站上放了一张图片试验场地/ MyImage.jpg然后在另一个文件中，您尝试调用图像为试验场地/ myimage.jpg，它可能不会起作用。
浏览器、web服务器和编程语言不能一致地处理空格。例如，如果你在文件名中使用空格，一些系统可能会将文件名视为两个文件名。一些服务器将用“%20”(url中空格的字符代码)替换文件名中的区域，导致所有链接被破坏。用连字符分隔单词比用下划线更好:my-file.htmlvs。my_file.html．

简单的回答是，您应该在文件名中使用连字符。谷歌搜索引擎将连字符视为单词分隔符，但不以这种方式视为下划线。由于这些原因，最好养成这样的习惯:将文件夹和文件名写成小写，不带空格，用连字符分隔，至少在您知道自己在做什么之前是这样的。这样你以后遇到的问题就会更少。

你的网站应该有什么样的结构?

接下来，让我们看看测试站点应该具有什么样的结构。在我们创建的任何网站项目中，最常见的东西是一个索引HTML文件和包含图像、样式文件和脚本文件的文件夹。现在让我们创建这些:

index . html这个文件通常包含你的主页内容，也就是人们第一次访问你的网站时看到的文本和图像。使用文本编辑器，创建一个名为index . html保存在你的试验场地文件夹中。
图片文件夹:此文件夹将包含您在网站上使用的所有图像。创建一个名为图片,在你试验场地文件夹中。
风格文件夹:这个文件夹将包含用于样式化你的内容的CSS代码(例如，设置文本和背景颜色)。创建一个名为风格,在你试验场地文件夹中。
脚本文件夹:这个文件夹将包含所有的JavaScript代码用于添加到您的网站的交互功能(例如，按钮加载数据时点击)。创建一个名为脚本,在你试验场地文件夹中。

注意:在Windows计算机上，您可能很难看到文件名，因为Windows有一个名为隐藏已知文件类型的扩展名默认开启。通常，您可以通过转到Windows资源管理器，选择文件夹选项…选项,取消勾选隐藏已知文件类型的扩展名复选框，然后单击好吧．有关你的Windows版本的更多具体信息，你可以在网上搜索。

文件路径

要使文件相互通信，您必须在它们之间提供一个文件路径——基本上就是一个路由，以便一个文件知道另一个文件的位置。为了演示这一点，我们将在我们的index . html文件，并使其显示您在文章中选择的图像“你的网站会是什么样子?”或者，您可以选择一个现有的图像，您的处置，在您的计算机上或从网络，并使用它在以下步骤:

将前面选择的图像复制到图片文件夹中。

打开你的index . html文件，并将以下代码插入到文件中，如图所示。现在不要担心这一切意味着什么——我们将在本系列的后面更详细地查看这些结构。

<！文档类型 超文本标记语言>
<超文本标记语言>
  <头>
    <元 字符集＝＂utf - 8＂>
    <标题>我的测试页面标题>
  头>
  <身体>
    <img src＝＂＂ alt＝＂我的测试图像＂>
  身体>
超文本标记语言>

这条线是将图像插入页面的HTML代码。我们需要告诉HTML图像在哪里。图像在图片目录，该目录与index . html。要从其中遍历文件结构index . html对于我们的图像，我们需要的文件路径是图片/映像文件名。例如，我们的图像被调用firefox-icon.png，则文件路径为图片/ firefox-icon.png．
的双引号之间插入文件路径到HTML代码中src = " "代码。
保存HTML文件，然后将其加载到web浏览器中(双击文件)。你应该看到你的新网页显示你的图像!

一个截图，我们的基本网站只显示firefox的标志-一个燃烧的狐狸包装世界

文件路径的一些一般规则:

要链接到与调用HTML文件在同一目录下的目标文件，只需使用文件名，例如:my-image.jpg．
要引用子目录中的一个文件，将目录名写在路径前面，加上正斜杠，例如。子目录/ my-image.jpg．
链接到目录中的目标文件以上调用HTML文件，写两个点。举个例子，如果index . html的子文件夹试验场地和my-image.jpg在里面试验场地，你可以参考my-image.jpg从index . html使用. . / my-image.jpg．
例如，您可以任意组合这些内容. . /子目录/ another-subdirectory / my-image.jpg．