使用 HTML a 标签创建超链接和导航

HTMLHTMLBeginner
立即练习

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

介绍

在本实验中,你将学习如何使用 HTML A 标签创建超链接和导航,重点在于构建一个完整的网页结构并实现各种链接技术。实验将引导你完成设置基本 HTML 页面、创建页面间导航链接、实现联系链接、开发文档书签以及探索使用 target 属性的链接行为。

你将从建立一个基本的 HTML5 文档结构开始,然后逐步提升技能,添加不同类型的超链接,包括内部页面导航、电子邮件和电话联系链接以及跨页面引用。通过本实验,你将掌握如何有效地使用锚点标签(anchor tags)来创建交互性强且结构良好的网页。


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/viewport("`Viewport Declaration`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-451037{{"`使用 HTML a 标签创建超链接和导航`"}} html/head_elems -.-> lab-451037{{"`使用 HTML a 标签创建超链接和导航`"}} html/viewport -.-> lab-451037{{"`使用 HTML a 标签创建超链接和导航`"}} html/layout -.-> lab-451037{{"`使用 HTML a 标签创建超链接和导航`"}} html/nav_links -.-> lab-451037{{"`使用 HTML a 标签创建超链接和导航`"}} html/inter_elems -.-> lab-451037{{"`使用 HTML a 标签创建超链接和导航`"}} end

设置基本 HTML 页面结构

在这一步骤中,你将学习如何创建一个基本的 HTML 页面结构,作为添加超链接和导航的基础。HTML(超文本标记语言,HyperText Markup Language)是用于创建网页的标准标记语言。

首先,打开 WebIDE 并导航到 ~/project 目录。在文件资源管理器中右键点击并选择“新建文件”,创建一个名为 index.html 的新文件。

让我们创建一个包含基本结构的简单 HTML5 文档:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>
      This is a basic HTML page structure that we'll use to create hyperlinks.
    </p>
  </body>
</html>

让我们分解一下这个 HTML 结构的关键组成部分:

  • <!DOCTYPE html> 声明这是一个 HTML5 文档
  • <html> 是 HTML 页面的根元素
  • <head> 包含文档的元信息
  • <meta charset="UTF-8"> 指定字符编码
  • <meta name="viewport"> 确保在移动设备上正确渲染
  • <title> 设置浏览器标签页中显示的页面标题
  • <body> 包含页面的可见内容

注意:了解更多关于如何在 WebIDE 中预览 HTML 文件

在浏览器中打开此文件时的示例输出:

HTML 页面在浏览器中渲染

创建页面间导航链接

<a> 标签用于在 HTML 中创建超链接。创建超链接的基本语法是 <a href="URL">链接文本</a>

在这一步骤中,你将学习如何使用 HTML 锚点(<a>)标签在不同页面之间创建导航链接。首先,让我们创建额外的 HTML 文件来演示页面间的导航。

~/project 目录中创建两个新文件:about.htmlcontact.html

更新 index.html 文件以包含导航链接:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>Welcome to My Website</h1>
    <p>This is the home page with navigation links.</p>
  </body>
</html>

创建 about.html 文件:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About Page</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>About Us</h1>
    <p>Learn more about our website and mission.</p>
  </body>
</html>

创建 contact.html 文件:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Page</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>Contact Us</h1>
    <p>Get in touch with our team.</p>
  </body>
</html>

关于页面间导航的关键点:

  • <a href="..."> 属性指定目标页面
  • 当链接同一目录中的页面时,使用相对文件路径
  • 每个页面都包含一致的导航菜单

在 Web 浏览器中的示例输出:

浏览器显示导航链接

实现电子邮件和电话联系链接

在这一步骤中,你将学习如何使用 HTML 锚点标签创建可点击的电子邮件和电话号码链接。打开 contact.html 文件并使用特殊链接类型更新它。

使用以下内容更新 contact.html 文件:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Page</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>Contact Information</h1>

    <h2>Get in Touch</h2>

    <h3>Email Links</h3>
    <p>
      Contact us at:
      <a href="mailto:[email protected]">[email protected]</a>
    </p>

    <h3>Phone Links</h3>
    <p>
      Call us at:
      <a href="tel:+1-555-123-4567">+1 (555) 123-4567</a>
    </p>

    <h3>Multiple Contact Options</h3>
    <p>
      Email: <a href="mailto:[email protected]">[email protected]</a><br />
      Phone: <a href="tel:+1-800-555-0199">1-800-CONTACT</a>
    </p>
  </body>
</html>

关于电子邮件和电话链接的关键点:

  • mailto: 前缀创建电子邮件链接,打开默认的电子邮件客户端
  • tel: 前缀创建电话号码链接,适用于移动设备
  • 这些链接使用户只需点击一次即可轻松联系你

在 Web 浏览器中的示例输出:

浏览器显示联系链接

在单个页面中创建文档书签

在这一步骤中,你将学习如何使用 HTML 锚点标签创建内部页面书签。在 ~/project 目录中创建一个名为 long-document.html 的新文件,内容如下:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document with Bookmarks</title>
    <style>
      body {
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
      }
      section {
        height: 500px;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Table of Contents</h1>
    <nav>
      <a href="#section1">Section 1</a> | <a href="#section2">Section 2</a> |
      <a href="#section3">Section 3</a>
    </nav>

    <section id="section1">
      <h2>Section 1: Introduction</h2>
      <p>
        This is the first section of our long document. Click the links above to
        navigate quickly.
      </p>
    </section>

    <section id="section2">
      <h2>Section 2: Main Content</h2>
      <p>This is the second section with more detailed information.</p>
    </section>

    <section id="section3">
      <h2>Section 3: Conclusion</h2>
      <p>This is the final section of the document.</p>
    </section>

    <a href="#" style="position: fixed; bottom: 20px; right: 20px;"
      >Back to Top</a
    >
  </body>
</html>

关于文档书签的关键点:

  • <style> 块用于添加 CSS 以美化文档,包括设置段落高度和边距。暂时不用担心 CSS,我们将在后续实验中详细讲解。

    • max-width: 600px; 设置文档的最大宽度
    • margin: 0 auto; 使文档水平居中
    • line-height: 1.6; 设置行高以提高可读性
    • section { height: 500px; margin-bottom: 20px; } 设置每个段落的高度和底部边距
  • 使用 id 属性创建书签目标。

  • 使用 href="#elementId" 创建链接以跳转到特定部分。

  • # 符号后跟 id 创建内部页面链接。

long-document.html 添加到导航链接的末尾,以便你可以预览文档。

在 Web 浏览器中的示例输出:

浏览器预览带书签的文档

使用 Target 属性控制链接行为

在这一步骤中,你将学习 HTML 链接的 target 属性,这些属性控制链接的打开方式。在 ~/project 目录中创建一个名为 link-targets.html 的新文件:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Link Target Attributes</title>
  </head>
  <body>
    <h1>Link Target Demonstration</h1>

    <h2>Default Link Behavior</h2>
    <p>
      <a href="https://www.example.com">Normal Link</a>
      (Opens in the same window)
    </p>

    <h2>Target Attribute Examples</h2>
    <p>
      <a href="https://www.example.com" target="_blank">New Tab Link</a>
      (Opens in a new tab)
    </p>

    <h2>Multiple Target Demonstrations</h2>
    <p>
      <a href="https://www.example.com" target="_self">Same Window</a> |
      <a href="https://www.example.com" target="_blank">New Tab</a> |
      <a href="https://www.example.com" target="_parent">Parent Frame</a> |
      <a href="https://www.example.com" target="_top">Full Browser Window</a>
    </p>

    <h2>Named Window Target</h2>
    <p>
      <a href="https://www.example.com" target="myWindow"
        >Open in Named Window</a
      >
    </p>
  </body>
</html>

关于链接 target 属性的关键点:

  • _blank:在新标签页或窗口中打开链接
  • _self:默认行为,在同一窗口中打开
  • _parent:在父框架中打开
  • _top:在整个浏览器窗口中打开
  • 自定义命名目标可以创建特定的窗口行为

复制 Web 服务器 URL 并在 URL 末尾添加 /link-targets.html 以查看页面(新标签页)。

链接 target 属性演示

在 Web 浏览器中的示例输出:

链接 target 属性演示

总结

在本实验中,参与者学习了如何创建完整的 HTML 网页并实现各种超链接技术。实验从建立基本的 HTML5 页面结构开始,展示了诸如 DOCTYPE、meta 标签和基本内容组织等关键元素。参与者探索了如何在多个页面之间创建导航链接,利用 HTML 锚点标签连接网站的不同部分。

实验进一步扩展了超链接的功能,介绍了诸如实现电子邮件和电话联系链接、在单个页面中创建文档书签以及通过 target 属性理解链接行为等高级技术。这些实践练习为参与者提供了使用 HTML 链接机制构建交互性强且结构良好的网页的实践经验。

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