HTML 超链接入门详解 | A 标签与 href 属性使用指南（16）

如果说 HTML 是构建网页的语言，那么“超链接”就是网页之间的桥梁。没有超链接，互联网就不会成为“网”，它会变成一堆孤立的页面。因此，理解并掌握超链接的写法，是迈向真正“会写网页”的第一步。

什么是超链接？

简单来说，超链接就是让用户从一个位置跳转到另一个位置的工具。这个“位置”可以是：

• 另一个网站（比如从你的网页跳到谷歌、京东）；
• 你网站里的其他页面（比如从“首页.html”跳回到“产品页.html”）；
• 甚至是当前页面的某个具体位置（比如跳到某一段内容）。

在日常浏览网页时，你会看到无数的超链接：新闻网站的标题列表、购物网站的商品分类、博客文章的“继续阅读”按钮……它们都通过超链接，把页面连接成一个可自由穿梭的网络。

📌 小知识点：HTML 的全称是 HyperText Markup Language，其中的“HyperText（超文本）”指的就是超链接。可见，它在 HTML 语言中占据了非常核心的位置。

超链接的基本写法

在 HTML 中，超链接是通过 <a> 标签 来定义的。

a 代表 anchor（锚点）。最常用的属性是 href，用来指定跳转的目标地址。

一个最简单的超链接示例如下：

<a href="https://www.baidu.com">百度一下</a>

解释一下：

• <a>：这是超链接标签。
• href="https://www.baidu.com"：告诉浏览器，这个链接的目标是百度。
• 百度一下：这是用户看到的可点击文字。

当你点击这个文字时，浏览器就会自动跳转到百度首页。

蓝色与紫色的区别

你可能注意到，有些链接是蓝色，有些是紫色。这不是网页作者随便设置的，而是浏览器的默认规则：

• 蓝色表示这个链接你还没有访问过（未访问状态）。
• 紫色表示这个链接你曾经点过（已访问状态）。

这样一来，你就能很快分辨：哪些内容是新的，哪些已经浏览过。

当然，将来我们学习 CSS 之后，可以完全自定义这些颜色样式。但在现在的学习阶段，先理解浏览器的默认行为就够了。

外部链接与内部链接

超链接通常分两类：

1. 外部链接
   指向站外的页面，需要写完整的地址（带 https:// 协议）。 <a href="https://www.jd.com">京东商城</a>
2. 内部链接
   指向站点内部的页面，可以直接写文件名（相对路径）。
   如果 首页.html 和 产品页.html 在同一个文件夹里，就可以这样写： <a href="首页.html">返回列表页</a> 注意，如果文件不在同一个目录，就必须写清楚路径，否则会报错（找不到页面）。

但在实际应用中，光能跳转还不够，我们还经常会用到一些“增强属性”，让超链接更灵活、更符合用户习惯。

下面我们来看看几个常见的超链接进阶用法。

1）在新窗口打开链接：target="_blank"

有时候，我们希望用户点击链接时，不要覆盖当前页面，而是在新窗口（或新标签页）中打开。这时，就可以给 <a> 标签加上 target="_blank"：

<a href="https://www.baidu.com" target="_blank">百度一下（新窗口）</a>

这样，点击后浏览器会自动新开一个标签页，而原页面不会丢失。
👉 这种方式常用于外部网站的跳转，避免用户离开你的网站。

2）给链接加提示文字：title

如果你想在用户把鼠标悬停在链接上时，显示一个小提示，可以使用 title 属性：

<a href="https://www.jd.com" title="跳转到京东商城">京东商城</a>

效果是：鼠标悬停时会出现“跳转到京东商城”的小黄框提示。
👉 这在实际中很常见，特别是链接文字比较短时，用来补充说明。

3）下载链接：download

如果你希望用户点击链接后不是跳转，而是直接下载文件，可以在 <a> 标签里加上 download 属性。

<a href="files/example.pdf" download>下载示例 PDF</a>

• href="files/example.pdf"：指定文件路径。
• download：告诉浏览器这是下载行为。

这样，用户点击时就会自动下载 example.pdf 文件，而不是在浏览器中打开。

4）跳转到页面内指定位置（锚点）

除了跳到外部或内部页面，超链接还能跳到当前页面的某个位置，这在长文章里特别有用。

第一步：给目标位置添加 id

<h2 id="chapter1">第一章：超链接入门</h2>

第二步：用超链接跳到该位置

<a href="#chapter1">跳到第一章</a>

这里的 #chapter1 就是锚点，点击后会直接滚动到带有 id="chapter1" 的那一段。
👉 常见应用：目录跳转、返回顶部按钮。

超链接的常见错误与最佳实践

在写超链接的过程中，初学者很容易掉进一些坑里。下面我们总结几个最常见的问题，以及对应的解决方案。

1）错误：只写域名，没有协议

<a href="www.baidu.com">百度</a>

这样写，在很多情况下会出问题。浏览器会把它当作“相对路径”去拼接当前页面地址，导致跳转失败。

✅ 正确写法：必须带上协议（http 或 https）

<a href="https://www.baidu.com">百度</a>

2）错误：内部页面路径写错

假设你有两个文件：

• 08超链接.html
• 07列表.html

如果它们在同一个文件夹里，写法应该是：

<a href="07列表.html">返回列表页</a>

但如果 07列表.html 放在 pages/ 子文件夹中，就要这样写：

<a href="pages/07列表.html">返回列表页</a>

✅ 最佳实践：在项目中按目录来管理文件，路径要写清楚，避免 404（页面找不到）。

3）错误：过度依赖 target="_blank"

虽然 target="_blank" 可以在新标签页打开链接，但如果滥用，用户会被迫打开一堆标签页，体验反而不好。

✅ 建议：

• 外部网站（如跳到百度、京东） → 可以用 _blank，避免用户离站。
• 内部页面（你自己网站的页面） → 默认就好，不要强制新开。

4）错误：把普通文字当链接用

有些初学者以为写上网址就会自动变成链接，比如：

3w.baidu123.com

但实际上，这只是普通文字，点击不了。

✅ 正确做法：必须用 <a> 包裹，并加上 href：

<a href="https://3w.baidu123.com">百度123</a>

5）错误：链接没有可读性

很多时候，超链接文字会直接写成：

<a href="https://www.baidu.com">点击这里</a>

这种写法虽然能跳转，但对用户体验和 SEO 都不太友好。

✅ 最佳实践：让链接文字本身有意义

<a href="https://www.baidu.com">百度搜索引擎</a>

这样即使不看上下文，用户也能明白这是跳到百度的。