首先使用<nav>标签定义导航区域，再用<ul><li>组织导航项，通过标签的href属性设置链接目标，可选添加class="active"高亮当前页或target="_blank"在新窗口打开链接。

在html中创建导航链接，主要是使用<a>标签（锚标签）来定义超链接，并结合结构化标签如<nav>、<ul>、<li>等组织导航菜单。以下是详细步骤，帮助你快速搭建一个基础的HTML导航链接。

1. 使用 nav 标签定义导航区域

<nav>标签用于定义页面的导航部分，有助于语义化结构，提升可读性和SEO效果。

<nav>
  <!– 导航链接将放在这里 –>
</nav>

2. 创建无序列表组织导航项

通常用<ul>（无序列表）和<li>（列表项）来排列导航菜单，使结构更清晰。

<nav>
  <ul>
    <li><a href=”index.html“>首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <li><a href=”services.html”>服务</a></li>
    <li><a href=”contact.html”>联系我们</a></li>
  </ul>
</nav>

3. 设置 href 属性指向目标页面或URL

href属性是<a>标签的关键，用于指定链接跳转的目标：

立即学习“前端免费学习笔记（深入）”；

苏打办公

360旗下的办公工具导航，优质海量工具

21

查看详情

• 内部页面：如 href="about.html"
• 外部网站：如 href="https://www.example.com"，记得加上https://
• 页面锚点：如 href="#section1"，跳转到当前页的某个ID位置
• 邮箱链接：href="mailto:someone@example.com"

4. （可选）添加当前页面高亮或打开方式

可以为当前页面的链接添加类名以便用css高亮显示，或设置链接在新窗口打开。

<li><a href=”index.html” class="active">首页</a></li>
<li><a href=”https://example.com” target="_blank">外链示例</a></li>

说明：target="_blank"让链接在新标签页打开；class="active"可用于通过CSS标记当前页。

基本上就这些。写好HTML结构后，你可以用CSS美化导航样式，比如横向排列、悬停效果等。HTML导航链接的核心是正确使用<a>标签并合理组织结构，不复杂但容易忽略细节。