HTML 超链接使用教程：小白入门篇（17）

你有没有注意过，当你在网页上点击文字或按钮时，页面就像被魔法拉扯一样跳到另一个地方？这背后就是 超链接（Hyperlink） 的功劳。几乎每个网页都离不开它：新闻网站的“阅读全文”、电商网站的“查看商品”，博客里的“更多技巧”，这些都是超链接在发挥作用。

在 HTML 中，创建超链接最常用的标签是 <a>。别被它小小的样子吓到，它可是网页里的万能“指路牌”。

第一部分：<a> 标签和 href 属性

<a> 标签：网页里的“锚点”

• 标签：<a>
• 英文全称：anchor
• 含义来源：Anchor 原意是船锚，用来固定船只。网页里，<a> 就像一个锚点或指路牌，告诉浏览器“用户想去哪里”。
• 作用：创建超链接，让用户点击后跳转到目标页面或页面内的位置。

生活化例子：想象你逛一个小镇，街道上有一个牌子写着“去超市”，你跟着牌子走就能到超市。网页里的 <a> 标签就像这个指示牌，把你带到目标页面。

href 属性：超链接的“目的地”

• 属性：href
• 英文全称：hypertext reference
• 含义来源：意思是“超文本引用”，也可以理解为“链接的目的地地址”。
• 作用：告诉 <a> 标签点击后应该去哪里。

<a href="https://www.baidu.com">去百度主页看看</a>

• <a>：创建一个链接
• href="..."：链接目标，这里是百度主页
• “去百度主页看看”：用户看到的文字，点击就跳转

生活化理解：指示牌上不仅写“去超市”，还指明了方向和路线，href 就是这个“路线指示”，告诉你去哪儿。

跳转到本地页面

<a href="menu.html">查看今天的菜谱</a>

• 点击后打开“今天的菜谱”页面
• 链接文字清楚明了，用户一看就知道会发生什么

生活化理解：你在家里贴了便签写着“去冰箱拿牛奶”，这个便签就是 <a>，牛奶所在的位置就是 href 指向的目标。

第二部分：控制超链接打开方式（target 属性）

有时候，你点击一个链接，不希望原来的页面消失，而是希望新页面在另一个标签页打开，这就是 target 属性派上用场的地方。

target 属性：链接的“打开方式”

• 属性：target
• 英文全称：target（目标）
• 含义来源：表示点击链接后，网页打开的目标位置或“方向”。
• 作用：控制点击链接时，新页面在当前页面打开还是在新标签页打开。

常用值

示例代码

<!-- 在当前页面打开 -->
<a href="menu.html" target="_self">查看今天的菜谱（当前页）</a>

<!-- 在新标签页打开 -->
<a href="menu.html" target="_blank">查看今天的菜谱（新标签页）</a>

生活化理解：

• _self 就像你走在主街上，沿着街道直接到达目的地，原来的街道消失了。
• _blank 就像开了一条新捷径去超市，原来的街道仍在，你可以随时回去。

使用场景建议

• 国内网站（比如百度、淘宝、京东）通常喜欢 _blank，方便用户可以在新标签查看商品或内容，方便返回原页面。
• 国外网站（比如 Google）通常使用 _self，用户在当前页面直接查看内容，依靠浏览器“回退”返回原页面。

第三部分：页面内部跳转（锚点）

除了跳转到其他页面，超链接还能在同一个页面内部跳来跳去，这就是“锚点”功能。比如你阅读一篇长文章，想快速回到顶部，或者直接跳到某个章节，这时候就用到内部跳转。

ID 属性：网页元素的“身份证”

• 属性：id
• 英文全称：identifier
• 含义来源：identifier 意思是“身份标识”，就像每个人的身份证号在全国都是唯一的。
• 作用：为 HTML 元素提供唯一标识，让超链接可以精确跳转到这个元素位置。

<p id="top">这是页面的顶部内容</p>

生活化理解：想象一个大楼里的办公室，每个办公室都有独一无二的门牌号，id 就是这个门牌号，方便你直接找到对应的房间。

跳回顶部

<a href="#top">回到顶部</a>

• href="#top" 中的 #top 指向 id="top" 的元素
• 点击链接，页面就会自动滚动到顶部位置

生活化理解：就像你按电梯按钮直接回到一楼，不用走楼梯。

跳到底部或特定位置

<!-- 页面底部 -->
<div id="bottom">这是页面底部内容</div>

<!-- 跳转链接 -->
<a href="#bottom">去页面底部</a>

<!-- 跳到第三段 -->
<p id="p3">这是第三个自然段内容</p>
<a href="#p3">去第三段</a>

小贴士：

• ID 必须唯一，区分大小写
• 推荐以字母开头，例如 top、bottom、p3
• 多个元素使用相同 ID 会导致跳转失效

第四部分：占位符超链接与开发技巧

在网页开发中，有时候你还没有确定链接的目标，但又需要先写一个“超链接占位”，这时就可以用 占位符超链接。

使用井号 # 作为占位符

<a href="#">功能暂未确定</a>

• 点击链接，页面会跳回顶部
• 适合暂时占位，让代码看起来完整，但功能尚未确定

生活化理解：就像在路上立了一个“敬请期待”的指示牌，大家知道这里将来会有路可走，但现在还没开通。

使用 JavaScript 冒号防止跳转

<a href="javascript:void(0)">功能暂未上线</a>

• 点击不会跳动
• 占位效果和 # 类似，但不会让页面滚动

生活化理解：街道上的告示牌按了按钮，原地不动，不会误导行人。

使用场景

1. 开发中占位：先写好页面结构，链接暂未确定目标
2. 功能未上线：用户可以看到链接，但点击不会报错或跳转
3. 动态生成内容：配合 JavaScript 控制行为，再决定跳转或弹窗

第五部分：超链接总结与注意事项

超链接两大核心功能

1. 跳转到其他页面
   • <a> 标签 + href 属性
   • 可以跳转到本地页面或互联网上的任意页面
2. 页面内部跳转（锚点）
   • <a> 标签 + href="#ID值"
   • 目标元素需设置唯一 id 属性

生活化理解：

• <a> 是指示牌
• href 是目的地
• id 是门牌号
  点击链接，就像跟随指示牌，直接找到目标位置。

ID 属性注意事项

• 每个 ID 必须唯一，区分大小写
• 推荐以字母开头，避免数字开头
• 在内部跳转时，ID 是锚点的目标，缺一不可

占位符超链接技巧

• 井号 #：简单占位，但会跳回顶部
• javascript:void(0)：点击不会跳动，更安全
• 占位符适合开发阶段或功能暂未上线的链接

小白总结

1. <a> 是网页里的指示牌，href 是目的地，id 是门牌号
2. target 决定点击后在当前页打开还是新标签页打开
3. 页面内部跳转需要 ID，确保唯一性
4. 占位符链接可以让开发更灵活，区分 # 和 javascript:void(0)
5. 链接文字要清楚，让用户知道点击后会发生什么

最后生活化比喻：
想象网页是一个小镇：

• <a> 是街道上的指示牌
• href 是指示牌上写的目的地
• target 决定你走在主路还是开捷径
• id 是门牌号

• 占位符是临时的“敬请期待”牌子

掌握了这些，你就能轻松写出既美观又实用的超链接，让网页更方便浏览。