HTML 相对路径导致导航菜单中出现 404 错误答案

【问题标题】：HTML relative paths lead to 404 error within a navigation menuHTML 相对路径导致导航菜单中出现 404 错误
【发布时间】：2020-03-18 00:47:32
【问题描述】：

我的导航菜单中有 6 个文件连接到服务器上 public_html 主文件夹中的文件夹。我使用<nav> 作为我的标签之一，因为我正在连接到包含我的菜单布局的外部css 样式表。

这是我的 HTML 菜单：

<center>
    <nav>
        <ul id="mainMenu">
            <li><a href="public_html/Dome1/art.html">Art Dome</a></li>
            <li><a href="public_html/Dome2/music.html">Music Dome</a></li>
            <li><a href="public_html/Dome3/code.html">Dome Unknown</a></li>
            <li><a href="https://www.google.com/maps/search/scrap+metal+near+me/@41.4745193,-81.7553814,14z/data=!3m1!4b1">Hunger Dome</a></li>
            <li><a href="https://www.wikipedia.org/wiki/special:Random">Education Dome</a></li>
            <li><a href="public_html/Dome6/yesno.html">Yes or No Dome</a></li>
            <!--yesno dome has green circle with yellow text saying "yes"-->
            <li><a href="public_html/Dome7/dontgo.html">Do Not Go Into This Dome!</a></li>
            <!--do not dome: red circle with text saying: you have entered into the wrong dome. Go back.-->
            <li><a href="public_html/Contact Dome/contact.html">Contact</a></li>
        </ul>
    </nav>
</center>

如您所见，它有点不稳定，但我想添加相对路径，例如：Dome1/art.html 等。有什么建议吗？

【问题讨论】：

此 HTML 文件在您的服务器上的什么位置？通常，我只希望这个标记在public_html 的父目录中起作用。 :)

标签： html css path relative-url

【解决方案1】：

首先，<center></center> 不再是有效的 HTML。而是构建一个 CSS 类。它不兼容 HTML5。也就是说，您的路径不应包含 public_html 文件夹。我重写了你的导航。

.text-center {
  text-align: center;
}

    <nav class="text-center">
      <ul id="mainMenu">
        <li><a href="dome1/art.html">Art Dome</a></li>
        <li><a href="dome2/music.html">Music Dome</a></li>
        <li><a href="dome3/code.html">Dome Unknown</a></li>
        <li><a href="https://www.google.com/maps/search/scrap+metal+near+me/@41.4745193,-81.7553814,14z/data=!3m1!4b1">Hunger Dome</a></li>
        <li><a href="https://www.wikipedia.org/wiki/special:Random">Education Dome</a></li>
        <li><a href="dome6/yesno.html">Yes or No Dome</a></li>
        <!--yesno dome has green circle with yellow text saying "yes"-->
        <li><a href="dome7/dontgo.html">Do Not Go Into This Dome!</a></li>
        <!--do not dome: red circle with text saying: you have entered into the wrong dome. Go back.-->
        <li><a href="contact-dome/contact.html">Contact</a></li>
      </ul>
    </nav>

【讨论】：