Question

我刚刚开始使用HTML和CSS，但我无法弄清楚为什么某些导航链接无法正常工作。我正在构建一个基本网站，这些文件在我的本地C盘上的一个名为＆＃39; shirley＆＃39;的文件夹下提供。在这个文件夹里面我有：

-index.html（登陆页面） -styles.css -an img文件夹与图片 - 一个名为contact的文件夹，其中包含另一个index.html / styles.css文件 - 一个名为department的文件夹，与上面相同 - 一个名为规则的文件夹，与上述相同

导航栏显示为HOME DEPARTMENT REGULATIONS CONTACT 当我在浏览器中打开index.html时，我可以单击HOME和DEPARTMENT，然后转到右侧页面。但是，点击“规则和联系”会显示“找不到此网页错误”。

我认为问题出现在浏览器中显示的网址中文件：/// C：/Users/MYNAME/Desktop/shirley/department/regulations.html 和文件：/// C：/Users/MYNAME/Desktop/shirley/department/contact.html

应该是文件：/// C：/Users/MYNAME/Desktop/shirley/regulations/index.html 和文件：/// C：/Users/MYNAME/Desktop/shirley/contact/index.html

我有 NO IDEA ，浏览器正在拿起这个地址。这是我在着陆页导航部分中的代码：

<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

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

<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，所以现在你在目录/部门。

如果你有一个像regulations/index.html这样的相对网址，它现在会在部门目录中查找一个规则目录。

使用绝对URL意味着它始终从根目录开始。

Answer 2

此问题是否始终从初始索引页面发生？如果嵌套的index.html文件上有相同的代码片段，则嵌套页面可能会尝试在自己的目录中查找文件夹。

EG：

我在地址栏中输入“file：/// C：/Users/MYNAME/Desktop/shirley/index.html”。结果：显示父页面，其他链接正确显示。
点击“规则”链接。结果：我需要正确地“file：/// C：/Users/MYNAME/Desktop/shirley/regulations/index.html”。
现在，在规则页面上，我点击另一个链接 - IE，。/ index或./contact/index。结果：如果我单击./index.html链接，会在“规则”页面上保留，因为它正在查看当前目录。如果我点击./contact/index.html，它会失败，因为联系人不是法规的子女。

只是一个想法。如果是这种情况，您可以通过明确链接来修复它：

    <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网站来说并不是真的有必要，但它在开发中使用起来确实很有用。如果您打算学习PHP，无论如何都需要它。

其次，您正在使用目录，如果没有网络服务器和适当的知识，这些目录处理不当。正如您已经过时的那样，URL的正确表示法非常重要。因此，就像迈克已经说过的那样，使链接绝对有用。但问题是，在上传到真实的网络服务器之前，你必须清理所有的链接。这是一项乏味且不必要的行动。

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

department.html
regulations.html
contact.html

如果您需要此类别中的某些子页面，只需使用短划线添加它们：

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

通过这种方式，您可以获得干净且可读的文件格式。

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

4 个答案: