HTML 导航链接

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

HTML <nav> 标签是用于在网站上创建导航链接的重要元素。在本实验中,你将学习如何使用 <nav> 标签在网站上创建导航菜单。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。



Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70800{{"`HTML 导航链接`"}} html/head_elems -.-> lab-70800{{"`HTML 导航链接`"}} html/lang_decl -.-> lab-70800{{"`HTML 导航链接`"}} html/layout -.-> lab-70800{{"`HTML 导航链接`"}} html/nav_links -.-> lab-70800{{"`HTML 导航链接`"}} html/doc_flow -.-> lab-70800{{"`HTML 导航链接`"}} html/inter_elems -.-> lab-70800{{"`HTML 导航链接`"}} end

创建一个基本的 HTML 页面

首先,让我们创建一个名为 index.html 的新 HTML 页面,并添加基本的 HTML 结构。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
  </head>
  <body></body>
</html>

使用 <nav> 标签添加导航链接

现在,让我们借助 HTML <nav> 标签创建一个导航菜单。在 <body> 标签内创建一个 <nav> 元素。

<body>
  <nav></nav>
</body>

使用 <a> 标签添加导航链接

接下来,使用 HTML <a> 标签在 <nav> 标签内添加一些导航链接。

<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact Us</a>
  </nav>
</body>

为导航菜单添加样式

为了让导航菜单更具视觉吸引力,让我们为其添加一些 CSS 样式。将以下样式添加到你的 HTML 中:

<head>
  <meta charset="UTF-8" />
  <title>My Website</title>

  <style>
    nav {
      background-color: #333;
      overflow: hidden;
    }

    a {
      float: left;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    a:hover {
      background-color: #ddd;
      color: black;
    }
  </style>
</head>

最终页面

你的最终 index.html 页面应该如下所示:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>

    <style>
      nav {
        background-color: #333;
        overflow: hidden;
      }

      a {
        float: left;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      a:hover {
        background-color: #ddd;
        color: black;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact Us</a>
    </nav>
  </body>
</html>

总结

在本实验中,你学习了如何使用 HTML <nav> 标签在网站上创建导航菜单。通过使用 <nav> 标签创建导航菜单并用 CSS 为其添加样式,可以帮助用户轻松浏览你的网站,同时使其更具视觉吸引力。

您可能感兴趣的其他 HTML 教程