介绍
在本实验中，你将学习如何使用 HTML A 标签创建超链接和导航，重点在于构建一个完整的网页结构并实现各种链接技术。实验将引导你完成设置基本 HTML 页面、创建页面间导航链接、实现联系链接、开发文档书签以及探索使用 target 属性的链接行为。
你将从建立一个基本的 HTML5 文档结构开始，然后逐步提升技能，添加不同类型的超链接，包括内部页面导航、电子邮件和电话联系链接以及跨页面引用。通过本实验，你将掌握如何有效地使用锚点标签（anchor tags）来创建交互性强且结构良好的网页。
设置基本 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:support@example.com">support@example.com</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:info@example.com">info@example.com</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 以查看页面（新标签页）。
在 Web 浏览器中的示例输出：
总结
在本实验中，参与者学习了如何创建完整的 HTML 网页并实现各种超链接技术。实验从建立基本的 HTML5 页面结构开始，展示了诸如 DOCTYPE、meta 标签和基本内容组织等关键元素。参与者探索了如何在多个页面之间创建导航链接，利用 HTML 锚点标签连接网站的不同部分。
实验进一步扩展了超链接的功能，介绍了诸如实现电子邮件和电话联系链接、在单个页面中创建文档书签以及通过 target 属性理解链接行为等高级技术。这些实践练习为参与者提供了使用 HTML 链接机制构建交互性强且结构良好的网页的实践经验。
