HTML 零基础教程：超链接（Link）完全指南

超文本标记语言（HTML）之所以被称为“超文本”，正是因为它允许我们将不同的文档相互连接起来。这种连接的媒介就是——超链接（Link）。

超链接是网页的灵魂，是实现互联网“互联”功能的核心。本篇教程将带您掌握创建、设置和使用 HTML 链接的全部技巧。

一、 核心标签：<a> 元素

在 HTML 中，我们使用 <a> 标签（Anchor，锚点）来定义超链接。链接的基本结构非常简单：

基本语法：

HTML

<a href="目标网址">链接显示的文本</a>

💡 关键属性：href

• href（Hypertext Reference）属性是 <a> 标签中最重要的属性。

• 它指定了链接目标的 URL（统一资源定位符），即点击链接后要跳转到的页面地址。

示例：

HTML

<p>
    访问最流行的搜索引擎：
    <a href="https://www.google.com">Google 首页</a>
</p>

二、 链接跳转目标：target 属性

默认情况下，点击链接后，新的页面会在当前浏览器窗口中打开。您可以通过 target 属性来改变链接页面的打开方式。

_self默认值。 在当前窗口 / 标签页中打开文档。内部导航，如从首页到关于我们页面。

_blank在新的窗口或标签页中打开文档。链接到外部网站时，保持用户停留在当前站点。

_parent在父框架集中打开目标文档（主要用于框架集）。_top在整个窗口中打开目标文档，取消所有框架（主要用于框架集）。

在新窗口打开外部链接的示例：

<a href="https://www.w3.org/" target="_blank">访问 W3C 官网 (在新标签页打开)</a>

三、 几种常见的链接类型

链接不仅可以指向外部网站，还可以实现多种强大的内部功能。

1. 外部链接（绝对 URL）

指向外部网站或域名的完整 URL。

• 格式： 必须包含协议（http:// 或 https://）。

• 示例： href="https://www.example.com/index.html"

2. 内部链接（相对 URL）

指向同一网站内的其他页面。这是网站内部导航的标准做法。

• 格式： 只需要写相对于当前文件的路径。

• 示例：

  • 同一目录： href="about.html"

  • 上一级目录： href="../products.html"

  • 下一级目录： href="images/logo.png"

3. 页面内锚点链接（书签）

允许您链接到当前页面或另一个页面的特定部分。

步骤一： 在目标位置设置一个 ID 属性。

<h2 id="section1">第一章节标题</h2>

步骤二： 创建链接，href 属性指向该 ID，前面加上 # 符号。

<a href="#section1">跳转到第一章节</a>

4. 邮件链接（Mailto）

点击链接时，会启动用户的默认邮件客户端，并预填收件人地址。

• 格式： href="mailto:收件人邮箱地址"

示例：

<a href="mailto:support@yourblog.com">联系我们</a>

总结与最佳实践

创建超链接的核心在于 <a> 标签和 href 属性。

• 外部链接 请考虑使用 target="_blank"。

• 内部链接 使用相对路径，以保持网站结构的灵活性。

• 链接文本 应该清晰、具有描述性，避免使用“点击这里”这种模糊的文字。