Navbar (导航栏) - HTML

导航栏是网页顶部经常出现的组件，用于导航网站的不同部分和功能。HTML提供了多种实现导航栏的方法，其中之一是使用<nav>元素和相关的标签和属性。

<nav> 元素

<nav>元素是HTML5中用于定义导航栏的语义化元素。它通常包含一组链接，用于导航到网站的不同页面。

示例代码：

<nav>
  <a href="/">首页</a>
  <a href="/about">关于</a>
  <a href="/contact">联系我们</a>
</nav>

在上面的代码中，导航栏包含了三个链接：首页、关于和联系我们。

使用<ul>和<li>创建导航栏

导航栏通常包含一个无序列表 (<ul>)，其中的每个列表项 (<li>) 表示一个导航链接。

示例代码：

<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ul>
</nav>

在上面的代码中，导航栏使用了<ul>和<li>元素来创建一个包含三个导航链接的列表。

添加样式

导航栏通常需要样式来提高可读性和可用性。可以使用CSS为导航栏添加样式，例如修改文本颜色、背景颜色和悬停效果等。

示例代码：

<style>
  nav {
    background-color: #333;
    color: #fff;
    padding: 10px;
  }

  nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
  }

  nav a:hover {
    text-decoration: underline;
  }
</style>

<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ul>
</nav>

在上面的代码中，为导航栏添加了一些简单的样式，包括白色背景、白色文字、间距和悬停效果。

以上就是使用HTML创建导航栏的基本方法，可以根据具体需求进行进一步定制和样式修改。更多关于导航栏和HTML的信息，请参考MDN Web文档。