KOKIYO STUDIO

欢迎来到本次 HTML 教程！在这一章节中，我们一起来学习如何使用 HTML 创建超链接。超链接是网页中非常重要的元素，它能让用户通过点击文字或按钮跳转到其他页面，无论是外部网站还是内部页面。下面，我会带你逐步学习如何建立超链接并实现多种功能。

什么是超链接？

超链接是 HTML 中使用 <a> 标签创建的，它可以引导用户跳转到：

1. 外部网页，例如 Google。
2. 内部页面，例如自己创建的页面。
3. 特定功能，例如打开邮箱窗口发送邮件。

1. 创建一个简单的外部链接

要建立一个超链接，我们需要使用 <a> 标签并设置 href 属性，指向目标网页地址。例如，我们想要链接到 Google：

• href 是指向目标网页的属性。
• 标签中间的文字（如“访问 Google”）是用户可见并可点击的内容。

步骤：

1. 把 Google 的网址贴在 href 属性中。
2. 输入链接文字。
3. 保存代码并查看效果。

点击链接后，你会跳转到 Google 页面。

2. 在新标签页中打开链接

默认情况下，点击超链接会在当前标签页中打开。如果你想在新标签页中打开链接，可以添加 target="_blank" 属性。例如：

效果：

1. 保存后，点击链接。
2. 浏览器会打开一个新标签页加载目标网页，而不是覆盖当前页面。

3. 链接到自己的页面

接下来，我们学习如何链接到自己创建的页面。假设我们有一个新页面 page2.html，步骤如下：

创建新的 HTML 文件： 在项目文件夹中新增一个文件，命名为 page2.html，并添加简单内容：

设置链接到新页面：使用相对路径链接到 page2.

效果：
点击链接后，跳转到 page2.html。

使用浏览器的“返回”按钮可以回到上一页

4. 添加电子邮件超链接

除了跳转网页，你还可以创建一个邮件超链接，点击后打开用户默认的邮件客户端。实现方式如下：

• mailto: 表示目标是电子邮件地址。
• 替换 example@example.com 为实际的邮箱地址。

效果：

1. 保存后，点击“发送邮件”链接。
2. 浏览器会打开邮件客户端（如 Outlook 或默认邮件应用），并自动填写收件人地址。

代码汇总示例

以下是完整的代码示例，包含了所有功能：

总结

通过本次教程，你学会了：

1. 如何用 <a> 标签创建超链接。
2. 设置 target="_blank" 在新标签页打开链接。
3. 使用相对路径链接到内部页面。
4. 使用 mailto: 创建电子邮件链接。

这些技能是 HTML 中的基础功能，但非常实用。

感谢您阅读本教程！如果在学习过程中有任何疑问，或者有其他想了解的内容，欢迎在评论区与我们互动~👇 我会尽力解答您的问题，并期待与大家一起交流学习！🌈 您的每一个分享和反馈，都会让更多初学者受益哦！😊