个人中心
gpt4 book ai didi

html - 创建带有本地 HTML 文件链接的导航栏

转载 作者：行者123 更新时间：2023-11-28 05:24:48 25 4
gpt4 key购买 nike

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

我该怎么做？

例如:

  • 首页
  • 关于
  • 花絮
  • 联系方式

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

最佳答案

您需要为导航栏创建一个主容器并使用 <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 上方文件夹中的页面在。

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

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

更多示例

  • 网页/
    • home.html
    • about.html
    • 有趣/
      • funfacts.html
    • contact.html

如果你在 home.html , about.html , 或 contact.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>

关于html - 创建带有本地 HTML 文件链接的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34146757/

25 4 0
文章推荐： javascript - 使用 Active Directory 身份验证在 JavaScript 中对 Azure API 应用程序进行 API 调用
文章推荐： c++ - 隐式定义的复制赋值运算符
文章推荐： javascript - 如何为 ASP.net 中的用户控件添加可使用控件 ID 调用的 JavaScript 函数
文章推荐： 带有 Gstreamer 管道的 Python