<a href="Music/bonapart.html">...</a> works fine but <a href="/Music/bonapart.html">...</a> 给出错误

<a href="Music/bonapart.html">...</a> works fine but <a href="/Music/bonapart.html">...</a> gives error

代码-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

Code-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

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

对于 HTML 文档中的 link，即 HTML 文档的 URL（除非被 <base> 元素覆盖）。

例如http://example.com/foo/bar 包含您的 link.

相对路径

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

  1. 所有查询字符串和片段标识符都已从基础中删除 URL
  2. 删除基数 URL 中 最后一个 / 之后的所有内容。
  3. 附加路径

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

绝对路径

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

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

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

不要将绝对 path 与绝对 url 混淆（后者以方案开头，例如https://).

在 URL specification

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