HTML 导航链接：掌握网站导航设计

介绍

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/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) 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 导航链接

介绍