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

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

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

我有style.css文件

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

当我尝试像这样从根路径加载css时

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

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

d:\downloads\learn\english\ielts\study\academy\reading\practice\u test\003.html

使用css应该从

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

如果文件是从

c:\Users\Student1\Desktop\study\Academy\reading\practice\U test\003.html

使用css应该从

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

如果您能提供有关如何将研究文件夹设置为根路径的任何反馈，我将不胜感激。

在提供路径时，您需要使用../从当前文件夹向上移动目录。试试这个：

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

---

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

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

所以HTML在研究/阅读/步骤3/中，CSS在研究/CSS/中的下方

所以你的链接将是

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

如果您想使用单一路径，无论您需要从计算机上的本地服务器（如wamp或Xampp）运行文件，如果您的根文件夹为 您可以通过以下方式访问css文件夹中的任意位置：

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

---

这个问题似乎是因为文件是使用服务器编写/测试的，而像这样的链接来自服务器，所以可以工作。从技术上讲，这种链接是一个带有绝对路径的相对URL，而不是一个绝对URL。问题出现在学生的机器上，因为他们没有使用服务器

潜在的解决方案包括

重写阅读材料，使其不使用绝对路径。这样做的一种常见技术是将图像、脚本、css等的资源文件放在HTML文件的子文件夹中。但这将涉及对HTML包下载的现有结构的重大更改

另一种方法是让学生在他们的机器上运行一个服务器，例如在node.js上运行的staticexpress服务器。学生必须将HTML文件下载到机器上的特定文件夹中，并使用本地主机地址访问材料。虽然比下载压缩电子书要复杂一些，但我假设这些是IT学生，他们可以学习如何安装本地服务器，但可能不会

---

请注意，HTML在study/reading/step3/中，CSS在study/CSS/I编辑我的问题的下面。无法使用javascript设置根路径吗？@david83不，您无法使用javascript设置根路径，因为我已经说过，您必须使用服务器。另一种选择是使用css文件的绝对路径，该路径将是C:/Users/David/Desktop/study/css/style.css，但这并不理想，您必须为每台电脑更改它。谢谢您的回复。对不起，我的问题不是很详细。当html文件位于study/master/academic/reading/practice_test/003.html中时，我需要使用../../../../../css/style.css，因为每个文件都有80多个子文件夹和400多个html文件。恐怕没有其他选择。您无法在本地文件系统上设置绝对url，因为每台计算机的文件结构都不同。当我使用它时，会正确加载css和js文件，但我也无法将此行添加到400个文件中。javascript呢？无法使用javascript设置基本href吗？我可以将它添加到一个js文件中，所有html文件都会加载它。你可以使用js设置一个元素，但这是毫无意义的/Users/David/Desktop是您计算机上的有效位置，但对我来说，它将完全不同。您可以写一个示例吗？基本href可以更改，只要它有效。

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

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