如何正确链接 html 文件夹中的源代码？

Question

我有多个包含其他 html 的文件夹，我想将它们相互链接起来。

文件夹结构如下所示：

Main Folder
   index.html
   nav.js
   Project Folder
      project1.html
      project2.html
   images
      image1.png
      image2.png
 

这就是我尝试链接的方式：

1. index.html： <a href="/Project Folder/project1.html"></a> <a href="./Project Folder/project1.html"></a>
2. project1.html： <a href="/index.html"></a> <img src="./images/image1.png> <script src="./nav.js">

它适用于实时可视代码，但当我只打开 index.html 时不起作用。 我因为既没有加载图像也没有加载脚本而出错，当我按下 ai 时得到另一个页面未找到的错误。

我想弄清楚在多个文件夹中链接项目的正确方法是什么，在这种情况下我必须使用“./”或“/”，如果还有其他的话。

Answer 1

当您使用“/”启动 URL 时，它会转到路径的最开头（根）。

使用 VSCode Live Server 时，它运行一个本地服务器，该服务器具有您在 VSCode 中打开的目录的根路径。 使用实时服务器，您将拥有 URL ，例如localhost:5000/index.html 。 由于根路径与 index.html 所在的位置相同，因此您只需键入/index.html即可访问它。

当您手动打开 index.html 时，根目录将更改为文件所在驱动器的根目录（例如 C:)。 如果您手动打开文件，您的 web 浏览器将打开类似C:/Users/User/Desktop/Website/index.html的内容。 If you were to try access /index.html , it would then go to C:/index.html on your hard drive.

如果您尝试访问与您打开的当前 html 文件位于同一目录中的文件，您需要从 URL 的开头删除/ 。

如果要访问可从父目录访问的文件，则希望它以../开头

当您直接打开 .html 文件时，要使您当前的工作正常，请进行以下更改：

索引.html

之前： <a href="/Project Folder/project1.html"></a>

之后： <a href="Project Folder/project1.html"></a>

项目1.html

之前： <a href="/index.html"></a> <img src="./images/image1.png"> <script src="./nav.js">

之后： <a href="../index.html"></a> <img src="../images/image1.png"> <script src="../nav.js">

Answer 2

你需要使用像 PUG.JS 这样的模板引擎

Answer 3

你不需要 a / bc 它们在同一个文件“主文件夹”中

除非文件比索引文件更深，否则执行 Project Folder/file