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

how to set a folder as a root path when running html without a server

本文关键字:文件夹 设置 路径 HTML 运行 服务器 情况下      更新时间:2023-09-26

我将为将在本地计算机上运行HTML格式的学生分享一堂关于HTML格式的课程。假设学生在桌面上复制了学习文件夹。并执行了它。地址栏如下所示。

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

我有样式.css文件

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

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

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

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

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

我收到此错误

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

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

d:''下载''学习''英语''雅思''学习''学术''

阅读''practice_test''003.html

使用<link rel="Stylesheet" href="/study/css/style.css" /> CSS 应该从

d:''下载''学习''

英语''雅思''学习''CSS''

如果文件是从

c:''用户''学生1''桌面''学习''学术''阅读''practice_test''003.html

使用<link rel="Stylesheet" href="/study/css/style.css" /> CSS 应该从

c:''用户''学生1''桌面''学习''css''

如果我希望获得有关如何将研究文件夹设置为根路径的任何反馈。

在提供路径时,您需要使用 ../ 从当前目录向上移动。试试这个:

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

我假设 001.html 在研究文件夹中,并且您在该研究文件夹中有一个名为 css 的文件夹,因此您的路径应该是:

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

所以HTML在study/reading/step3/中,CSS在study/css/中低于它。

所以你的链接将是

<link rel="stylesheet" href="../../css/style.css" />
如果你想使用一个路径,不管你必须从你的

机器上的本地服务器运行你的文件,比如wamp或Xampp,如果你的根文件夹是研究的您可以通过以下方式访问该文件夹中的任何位置的 CSS 文件夹:

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

问题似乎是因为文件是使用服务器编写/测试的,其中像<link rel="stylesheet" href="/css/style.css" />这样的链接可以工作,因为它们来自服务器。从技术上讲,这种链接是具有绝对路径的相对URL(它不是绝对URL(。问题出现在学生的计算机上,因为他们没有使用服务器。

潜在的解决方案包括

  1. 重写阅读材料,使其不使用绝对路径。执行此操作的常用技术是将图像、脚本、css 等的资源文件放在 HTML 文件的子文件夹中。但这将涉及对HTML包下载的现有结构进行重大更改。

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