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

Question

我的导航菜单中有 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等等。有什么建议吗？

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