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

介绍

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

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

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 91%。获得了学习者 100% 的好评率。

设置基本 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 文件。

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

创建页面间导航链接

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

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

在 ~/project 目录中创建两个新文件：about.html 和 contact.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 属性的关键点：