创建一个包含指向本地HTML文件的链接的导航栏

时间:2015-12-08 02:06:18

标签: html

在我的网站上有一个导航栏,当我点击导航链接时,它需要转到我本地存储在USB上的另一个文件。

我会怎么做?

例如:

  • 主页
  • 关于
  • FunFacts
  • 联系

假设有人想点击"关于"。我如何将它在我的usb上链接到about页面(一个单独的html文件)?

3 个答案:

答案 0 :(得分:3)

您需要为导航栏创建一个主容器,并使用<a>标记作为链接。根据您当前存储文件的方式,您必须适当地设置链接的href属性。

例如:

<html>
  <body>
    <ul class="navbar">
      <li class="nav-item">
        <a href="home.html">Home</a>
      </li>
      <li class="nav-item">
        <a href="about.html">About</a>
      </li>
      ...
    </ul>
  </body>
</html>

在示例中,我使用<ul>元素作为容器,因为它是导航项列表。您也可以选择使用<div>

对于每个子项,我将其包装在<li>中,这是一个列表项。在每个项目上,我使用上述<a>标记。

这些是实际创建链接的HTML标记。 href标记的<a>属性告诉浏览器用户点击链接时的去向。

示例

让我们假设您在home.html页面上。

在示例的情况下,“关于”链接告诉浏览器转到与当前(about.html)页面相同的目录中的home.html页面。

如果“about.html”文件存储在其他位置,您可以:

  • 使用..引用父目录(包含当前目录的目录),例如../about.html,这意味着在about.html页面上方找到home.html页面{ {1}}在。

  • 使用subdir/引用子目录(与当前文件位于同一位置的目录),例如pages/about.html,这意味着在about.html中找到pages页面{1}}文件夹与当前文件位于同一目录中。

  • 使用/引用网页的根目录。这通常附加到域名,但与本地计算机上的文件(通过file://访问)不太相关。根据您的浏览器和安全设置,您可以使用file://path/to/about.html之类的绝对路径,但出于安全原因,我认为这不适用于大多数现代浏览器。

更多示例

  • 网页/
    • home.html的
    • about.html
    • 乐趣/
      • funfacts.html
    • contact.html

如果您在home.htmlabout.htmlcontact.html,则可以使用:

<a href="home.html">Home</a>
<a href="about.html">Home</a>
<a href="fun/funfacts.html">Home</a>
<a href="contact.html">Home</a>

如果你在funfacts.html,你会使用:

<a href="../home.html">Home</a>
<a href="../about.html">Home</a>
<a href="funfacts.html">Home</a>
<a href="../contact.html">Home</a>

答案 1 :(得分:2)

好吧,将其他html文件(从usb棒)复制到与你开始的html文件相同的目录,然后更改导航栏链接

答案 2 :(得分:0)

当我需要做napoleon2.html时,我觉得我是一个完全白痴我试图做我/拿破仑2我没有把我的错误重新考虑你的家伙源代码。感谢大家,祝你未来编码好运!