有些导航链接有效，有些则无效。相对 URL 路径？

Question

我刚刚开始使用 HTML 和 CSS，我不明白为什么有些导航链接不起作用。我正在构建一个基本网站，文件在我的本地 C 驱动器上的一个名为 'shirley' 的文件夹下提供。在这个文件夹中我有：

-index.html（着陆页） -styles.css - 一个带有图片的img文件夹 - 一个名为 contact 的文件夹，其中包含另一个 index.html / styles.css 文件 - 一个名为 department 的文件夹，同上 -一个名为regulations的文件夹，同上

导航栏设置为HOME DEPARTMENT REGULATIONS CONTACT 当我在浏览器中打开 index.html 时，我可以单击“主页”和“部门”，然后转到正确的页面。然而，点击 REGULATIONS AND CONTACT 显示 'this webpage was not found error'.

我认为问题出在浏览器中显示的url，即文件:///C:/Users/MYNAME/Desktop/shirley/department/regulations.html 和 file:///C:/Users/MYNAME/Desktop/shirley/department/contact.html

而且应该是文件:///C:/Users/MYNAME/Desktop/shirley/regulations/index.html 和 file:///C:/Users/MYNAME/Desktop/shirley/contact/index.html

我不知道 浏览器从哪里获取这个地址。这是我在着陆页导航部分中的代码：

<ul>
<li><a class="nav" href="./index.html">Home</a></li> <!-- ===./ for root index to link back to itself=== -->
<li><a class="nav" href="department/index.html">Department</a></li>
<li><a class="nav" href="regulations/index.html">Regulations</a></li>
<li><a class="nav" href="contact/index.html">Contact</a></li>

有什么想法吗？我对此失去了理智:-(

Answer 1

使用绝对URLs，例如（取决于你的结构）：

<ul>
    <li><a class="nav" href="./index.html">Home</a></li> <!-- ===./ for root index to link back to itself=== -->
    <li><a class="nav" href="/department/index.html">Department</a></li>
    <li><a class="nav" href="/regulations/index.html">Regulations</a></li>
    <li><a class="nav" href="/contact/index.html">Contact</a></li>
</ul>

例如，可能发生的情况是您要去 /department/index.html，所以现在您位于目录 /department.

如果你有亲戚URL喜欢regulations/index.html，现在要在部门目录下找规章目录

使用绝对 URLs 意味着它总是从根开始。

Answer 2

这个问题是否总是从初始索引页出现？如果您在嵌套的 index.html 文件中有相同的代码片段，嵌套的页面可能正在尝试在它们自己的目录中查找文件夹。

EG:

我在地址栏输入"file:///C:/Users/MYNAME/Desktop/shirley/index.html"。结果：父页面与其他 link 正确显示。
我点击"Regulations"link。结果：我正确地到达 "file:///C:/Users/MYNAME/Desktop/shirley/regulations/index.html"。
现在，在“法规”页面上，我单击另一个 link -- IE、./index 或 ./contact/index。结果：如果我单击 ./index.html link，它 停留在 上，因为它在当前目录中查找。如果我点击 ./contact/index.html，它会失败，因为 contact 不是 Regulations 的子项。

只是一个想法。如果是这种情况，您可以通过显式 links 来修复它：

    <li><a class="nav" href="file:///C:/Users/MYNAME/Desktop/shirley/index.html">Home</a></li> <!-- ===./ for root index to link back to itself=== -->
    <li><a class="nav" href="file:///C:/Users/MYNAME/Desktop/shirley/department/index.html">Department</a></li>
    <li><a class="nav" href="file:///C:/Users/MYNAME/Desktop/shirley/regulations/index.html">Regulations</a></li>
    <li><a class="nav" href="file:///C:/Users/MYNAME/Desktop/shirley/contact/index.html">Contact</a></li>

Answer 3

我以前也遇到过这样的问题。问题是你少了一个点。变化

<li><a class="nav" href="./index.html">Home</a></li>

为了

<li><a class="nav" href="../index.html">Home</a></li>

Answer 4

我猜你进入了大多数网络编码初学者都会遇到的陷阱。首先，您不使用像 XAMPP 这样的本地网络服务器。虽然对于仅 HTML-only 的网站来说，它并不是真正必需的，但在开发中使用它确实有好处。如果您打算学习 PHP，无论如何您都需要它。

其次，您正在使用目录，如果没有网络服务器和适当的知识，这些目录将无法很好地处理。正如您已经体验过的那样，URL 的正确表示法非常重要。因此，就像 Mike 已经说过的那样，使链接成为绝对链接会有所帮助。但问题是，在上传到真正的网络服务器之前，您必须清理所有链接。一个乏味且不必要的动作。

解决方法是：不要为内容使用目录。虽然可以为图像、脚本、CSS 等使用文件夹，但几乎不需要将内容页面存储到目录中。只需使用类别名称作为文件名，如：

department.html
regulations.html
contact.html

如果您需要此类别中的一些子页面，只需添加它们，例如：

department-office.html
department-accounting.html
...

这样你就有了一个清晰易读的文件名。

有些导航链接有效，有些则无效。相对 URL 路径？

Some navigation links work, others don't. Relative URL path?

css

navigation

url