如何在没有服务器的情况下运行html时将文件夹设置为根路径

I am going to share a lesson on HTML format for students who will run it on their local computers. Lets say, the student copied the study folder on desktop. and executed it. The address bar looks like this.

我将为将在本地计算机上运行它的学生分享关于HTML格式的课程。可以说，学生在桌面上复制了学习文件夹。并执行它。地址栏看起来像这样。

file:///C:/Users/Student1/Desktop/study/reading/step3/001.html

I have style.css file

我有style.css文件

<link rel="Stylesheet" href="study/css/style.css" />

when I run the file I get this error

当我运行该文件时，我收到此错误

001.html:9 GET file:///C:/Users/David/Desktop/study/reading/step3/css/style.css net::ERR_FILE_NOT_FOUND

when I try to load the css from root path like this

当我尝试从这样的根路径加载CSS

<link rel="Stylesheet" href="/study/css/style.css" />

I get this error

我收到这个错误

001.html:9 GET file:///C:/study/css/style.css net::ERR_FILE_NOT_FOUND

There are more than 400 html files and 80 folders. It would take more than 3 hours to specify the .css and .js files for each file in each folder. I want to set a root path for each file no matter in what folder they are. So, basically after setting the folder study as a root path, if the file is loaded from

有超过400个html文件和80个文件夹。为每个文件夹中的每个文件指定.css和.js文件需要3个多小时。我想为每个文件设置一个根路径，无论它们在哪个文件夹中。因此，基本上将文件夹研究设置为根路径后，如果从中加载文件

d:\downloads\learn\english\ielts\study\academic\reading\practice_test\003.html

d：\下载\学习\英语\雅思\学习\学术\读\ practice_test \ 003.html

using <link rel="Stylesheet" href="/study/css/style.css" /> css should be loaded from

使用 css应该从

d:\downloads\learn\english\ielts\study\css\

d：\下载\学习\英语\雅思\学习\ CSS \

and if the file is loaded from

如果文件是从中加载的

c:\Users\Student1\Desktop\study\academic\reading\practice_test\003.html

C：\用户\ Student1 \桌面\学习\学术\读\ practice_test \ 003.html

using <link rel="Stylesheet" href="/study/css/style.css" /> css should be loaded from

使用 css应该从

c:\Users\Student1\Desktop\study\css\

C：\用户\ Student1 \桌面\学习\ CSS \

if I would appreciate any feedback on how to set the study folder as a root path.

如果我希望了解如何将学习文件夹设置为根路径的任何反馈。

3 个解决方案

#1

You need to use ../ to go up a directory from the current when providing the path. Try this:

在提供路径时，您需要使用../从当前目录开始。尝试这个：

<link rel="stylesheet" href="../../study/css/style.css" />

#2

I'm assuming 001.html is in study folder and you have a folder called css in that study folder so then your path should be:

我假设001.html在学习文件夹中，你在该学习文件夹中有一个名为css的文件夹，那么你的路径应该是：

<link rel="stylesheet" href="css/style.css" />

So HTML is in study/reading/step3/ and the CSS is below that in study/css/

所以HTML在study /阅读/步骤3 /并且CSS低于study / css /

so your link will be

所以你的链接将是

<link rel="stylesheet" href="../../css/style.css" />

If you want to use a single path no matter what you'll have to run your files from a local server on your machine such as wamp or Xampp that way if your root folder is study you can access your css folder anywhere within that folder by:

如果你想使用单一路径，无论你需要从你的机器上的本地服务器运行你的文件，如wamp或Xampp，如果你的根文件夹是研究你可以访问你的css文件夹在该文件夹中的任何位置：

<link rel="stylesheet" href="/css/style.css" />

#3

The problem seems to have arisen because the files were written/tested using a server where links like <link rel="stylesheet" href="/css/style.css" /> worked because they came from a server. Technically that kind of link is a relative URL with an absolute path (it is not an absolute URL). The problem arises on the students' machines because they are not using a server.

问题似乎已经出现，因为文件是使用服务器编写/测试的，其中像这样的链接起作用，因为它们来自服务器。从技术上讲，这种链接是具有绝对路径的相对URL（它不是绝对URL）。问题出现在学生的机器上，因为他们没有使用服务器。

Potential solutions include

潜在解决方案包括

Rewrite the reading material so it does not use absolute paths. A common technique for doing this is to place resource files for images, scripts, css etc. in subfolders of the HTML files. But this would involve major changes to the existing structure of the HTML package download.

重写阅读材料，使其不使用绝对路径。执行此操作的常用技术是将图像，脚本，CSS等的资源文件放在HTML文件的子文件夹中。但这将涉及对HTML包下载的现有结构的重大更改。
An alternative would be to have students run a server on their machine, such as a static express server running on node.js. Students would have to download the HTML files to a specific folder on their machine and access the material using a localhost address. Whilst somewhat more complicated than downloading a zipped ebook, I am assuming these are IT students who can be taught how to install a local server, but perhaps not!

另一种方法是让学生在他们的机器上运行服务器，例如在node.js上运行的静态快速服务器。学生必须将HTML文件下载到其计算机上的特定文件夹，并使用本地主机地址访问该材料。虽然比下载压缩电子书要复杂一些，但我认为这些是可以学习如何安装本地服务器的IT学生，但也许不是！

#1