HTML 文件路径上是否需要“./”和“../”？

Question

我在 href 和 src 等属性中使用相对 URL。我真的需要在路径前使用 ./ 和 ../ 才能正确建立 link 吗？

当我完成编码 index.html 后，我复制代码并将其用于我项目的其他 .html 文件。我发现必须纠正每条路径令人沮丧。

我的项目文件夹结构如下：

website-project folder
      index.html

      css folder
          style.css

      img folder
           image.png

      about folder
          about.html

如果我使用 index.html 代码启动 about.html，我需要更改从 ./ 到 ../ 的每条路径。使用 "Find & Replace" 工具使它更容易，但如果我可以 link 到基于根文件夹而不是当前文件夹的路径，它仍然会更好。例如：

使用

href="website-project/img/image.png"

inside about.html 会将 link 变为 website-project/img/image.png 而不是 website-project/about/img/image.png，这会导致错误。

2016 年 7 月 7 日更新

在 index.html 页面内，如果我使用 href="/about/about.html 而不是 link 创建 <a> 到：

file:///home/guizo/Documents/website-project/about.html

它 link 到：

file:///about/about.html

其他人也是如此links:

Answer 1

尝试使用

href="/img/image.png"

/指的是你的根目录。

编辑：以上不适用于本地静态网站。在这些情况下，您应该尝试使用 <BASE href /> 标签，该标签链接到一个固定的基地址。可以按如下方式使用：

对于index.html：

<html>
    <head>
        <title>index</title>
        <BASE href="file:///home/guizo/Documents/website-project/" />
    </head>
    <body>
        <a href="about/about.html">Go to about</a>
    </body>
</html>

对于about.html：

<html>
    <head>
        <title>About</title>
        <BASE href="file:///home/guizo/Documents/website-project/" />
    </head>
    <body>
        <a href="index.html">Go to index</a>
    </body>
</html>

Answer 2

试试这个“/img/image.png”。 / 代表站点的根目录。

HTML 文件路径上是否需要“./”和“../”？

Do I need "./" and "../" on HTML files paths?

html

path

href

hyperlink

src