<a href="Music/bonapart.html">...</a> 工作正常，但 <a href="/Music/bonapart.html">...</a> 给出错误 [重复]答案

【问题标题】：<a href="Music/bonapart.html">...</a> works fine but <a href="/Music/bonapart.html">...</a> gives error [duplicate]<a href="Music/bonapart.html">...</a> 工作正常，但 <a href="/Music/bonapart.html">...</a> 给出错误 [重复]
【发布时间】：2021-09-27 20:43:32
【问题描述】：

代码 1

 <html>
        <head>
            <title>Relative Link</title>
        </head>
        <body>
            <p>
                child folder <a href="Music/17_2.html">17_2</a>
            </p>
    
        </body>
    </html>

输出

child folder 17_2

代码 2

<html>
    <head>
        <title>Relative Link</title>
    </head>
    <body>
        <p>
            
            child folder <a href="/Music/17_2.html">17_2</a>
        </p>

    </body>
</html>

输出

ERR_FILE_NOT_FOUND

属性href的值中输入的路径开头的额外正斜杠/有什么意义

【问题讨论】：

@Ivar 否。在他提到的答案中，当我们开始 / 正斜杠时，它是从站点根目录读取的绝对路径。但是为什么它找不到我的文件呢？
因为您的文件不在站点根目录下的/Music/17_2.html。（即如果您转到http://example.com/Music/17_2.html，您的文件将不存在。）
看到它包含在我的文件夹中，我正在使用记事本中的 .html 制作网页，它没有托管在任何地方。如何以 http 开头？我不知道到底发生了什么我是 html 新手。
如果您在没有任何网络服务器的情况下在本地运行它，那么/ 将指向您的目录树的根目录。因此，如果您在file:///C:/Users/User/Desktop/test.html 上有您的文件，那么href="/Music/17_2.html" 会将您带到file:///C:/Music/17_2.html。如果您希望它使用绝对路径，则需要提供驱动器根目录的完整路径。
谢谢。现在我理解了概念，也理解了 Q。你提到并回答了这个问题。是的，我的 Q. 是重复的。

标签： html hyperlink path

【解决方案1】：

没有 /，链接将加载您所在的任何页面，加上链接。

即如果您在 www.abc.com/page1 上，则 href="contact-us.html" 会将您链接到 www.abc.com/page1/contact-us.html

如果你的 href 有一个前导/链接的结果 url 将是这样

www.abc.com/contact-us.html

链接开头的 / 将引用根域名，而不是当前查看的页面

【讨论】：

"如果您在 www.abc.com/page1 上，href="contact-us.html" 会将您链接到 www.abc.com/page1/contact-us.html" —那是错误的。它会带你到www.abc.com/contact-us.html
不，它不会，链接上没有前导 /，因此它与您当前正在查看的页面相关。如果链接上有一个前导 /，那么它就是你引用的。
你错了。你有一个额外的/ 不知从何而来。

【解决方案2】：

在解析相对 URL 时，您首先确定基本 URL。

对于 HTML 文档中的链接，它是 HTML 文档的 URL（除非被 <base> 元素覆盖）。

例如http://example.com/foo/bar 包含您的链接。

相对路径

如果 URL 是相对路径（即不是以/ 开头的路径）：

所有查询字符串和片段标识符都会从基本 URL 中删除
基本 URL 中 最后一个 / 之后的所有内容都将被删除。
路径已附加

http://example.com/foo/bar + baz = http://example.com/foo/baz

绝对路径

如果 URL 是绝对路径（即以单个 / 开头），则：

所有查询字符串和片段标识符都会从基本 URL 中删除
现有路径（即 authority（主机名+端口号）之后的所有内容）已被移除（请注意，您通常不会在开发环境之外的 URL 中看到端口号）
路径已附加

http://example.com/foo/bar + /baz = http://example.com/baz

不要将绝对path与绝对url混淆（后者以https://等方案开头）。

URL specification 的第 3 节中有一个有用的 URL 部分图表

【讨论】：

非常感谢。主要是我得到了所有。如何确定Base URL，绝对路径和相对路径有区别吗？
@AbhishekMane — 嗯。请参阅此答案的第二段。这是我说您需要确定基本 URL 后说的第一件事。
我并不清楚这一点。 http://example.com/foo/baz 它包含我们想从http://example.com/foo 中存在的html 文档中引用的链接，对吗？请详细说明，我不是在网络服务器上托管网站，只是我在文件和记事本中执行所有这些操作，扩展名为 .html。但我能理解。
您在浏览器的地址栏中输入http://example.com/foo/baz。这给了你一个网页。它是该网页中链接的基本 URL。该网页是围绕 HTML 文档构建的。该 HTML 文档包含一个链接。该链接有href="baz" 或href="/baz"。您导航到此答案中描述的 URL 的页面。
无论选择绝对路径还是相对路径，基本 URL 都是一样的。它基本上是当前目录的路径，对吗？