HTML 超链接完整教程：小白必学的 标签与跳转技巧
2025-11-17 23:06:58 世界杯北京你有没有注意过，当你在网页上点击文字或按钮时，页面就像被魔法拉扯一样跳到另一个地方？这背后就是 超链接（Hyperlink） 的功劳。几乎每个网页都离不开它：新闻网站的“阅读全文”、电商网站的“查看商品”，博客里的“更多技巧”，这些都是超链接在发挥作用。
在 HTML 中，创建超链接最常用的标签是 。别被它小小的样子吓到，它可是网页里的万能“指路牌”。
第一部分： 标签和 href 属性
英文全称：anchor
含义来源：Anchor 原意是船锚，用来固定船只。网页里， 就像一个锚点或指路牌，告诉浏览器“用户想去哪里”。
作用：创建超链接，让用户点击后跳转到目标页面或页面内的位置。
生活化例子：想象你逛一个小镇，街道上有一个牌子写着“去超市”，你跟着牌子走就能到超市。网页里的 标签就像这个指示牌，把你带到目标页面。
href 属性：超链接的“目的地”
属性：href
英文全称：hypertext reference
含义来源：意思是“超文本引用”，也可以理解为“链接的目的地地址”。
作用：告诉 标签点击后应该去哪里。
href="..."：链接目标，这里是百度主页
“去百度主页看看”：用户看到的文字，点击就跳转
生活化理解：指示牌上不仅写“去超市”，还指明了方向和路线，href 就是这个“路线指示”，告诉你去哪儿。
跳转到本地页面
点击后打开“今天的菜谱”页面
链接文字清楚明了，用户一看就知道会发生什么
生活化理解：你在家里贴了便签写着“去冰箱拿牛奶”，这个便签就是 ，牛奶所在的位置就是 href 指向的目标。
第二部分：控制超链接打开方式（target 属性）
有时候，你点击一个链接，不希望原来的页面消失，而是希望新页面在另一个标签页打开，这就是 target 属性派上用场的地方。
target 属性：链接的“打开方式”
属性：target
英文全称：target（目标）
含义来源：表示点击链接后，网页打开的目标位置或“方向”。
作用：控制点击链接时，新页面在当前页面打开还是在新标签页打开。
常用值
target 值含义类比生活场景_self在当前页面打开（默认）你跟随指示牌直接走去目的地，原地不留回头路_blank在新标签页或新窗口打开你在逛街时，顺便开了一条新路去超市，原地路线仍然保留，可以回头走原路
示例代码
生活化理解：
_self 就像你走在主街上，沿着街道直接到达目的地，原来的街道消失了。
_blank 就像开了一条新捷径去超市，原来的街道仍在，你可以随时回去。
使用场景建议
国内网站（比如百度、淘宝、京东）通常喜欢 _blank，方便用户可以在新标签查看商品或内容，方便返回原页面。
国外网站（比如 Google）通常使用 _self，用户在当前页面直接查看内容，依靠浏览器“回退”返回原页面。
第三部分：页面内部跳转（锚点）
除了跳转到其他页面，超链接还能在同一个页面内部跳来跳去，这就是“锚点”功能。比如你阅读一篇长文章，想快速回到顶部，或者直接跳到某个章节，这时候就用到内部跳转。
ID 属性：网页元素的“身份证”
属性：id
英文全称：identifier
含义来源：identifier 意思是“身份标识”，就像每个人的身份证号在全国都是唯一的。
作用：为 HTML 元素提供唯一标识，让超链接可以精确跳转到这个元素位置。
这是页面的顶部内容
生活化理解：想象一个大楼里的办公室，每个办公室都有独一无二的门牌号，id 就是这个门牌号，方便你直接找到对应的房间。
跳回顶部
href="#top" 中的 #top 指向 id="top" 的元素
点击链接，页面就会自动滚动到顶部位置
生活化理解：就像你按电梯按钮直接回到一楼，不用走楼梯。
跳到底部或特定位置
这是第三个自然段内容
小贴士：
ID 必须唯一，区分大小写
推荐以字母开头，例如 top、bottom、p3
多个元素使用相同 ID 会导致跳转失效
第四部分：占位符超链接与开发技巧
在网页开发中，有时候你还没有确定链接的目标，但又需要先写一个“超链接占位”，这时就可以用 占位符超链接。
使用井号 # 作为占位符
点击链接，页面会跳回顶部
适合暂时占位，让代码看起来完整，但功能尚未确定
生活化理解：就像在路上立了一个“敬请期待”的指示牌，大家知道这里将来会有路可走，但现在还没开通。
使用 JavaScript 冒号防止跳转
点击不会跳动
占位效果和 # 类似，但不会让页面滚动
生活化理解：街道上的告示牌按了按钮，原地不动，不会误导行人。
使用场景
开发中占位：先写好页面结构，链接暂未确定目标
功能未上线：用户可以看到链接，但点击不会报错或跳转
动态生成内容：配合 JavaScript 控制行为，再决定跳转或弹窗
第五部分：超链接总结与注意事项
超链接两大核心功能
跳转到其他页面
可以跳转到本地页面或互联网上的任意页面
页面内部跳转（锚点）
目标元素需设置唯一 id 属性
生活化理解：
href 是目的地
id 是门牌号点击链接，就像跟随指示牌，直接找到目标位置。
ID 属性注意事项
每个 ID 必须唯一，区分大小写
推荐以字母开头，避免数字开头
在内部跳转时，ID 是锚点的目标，缺一不可
占位符超链接技巧
井号 #：简单占位，但会跳回顶部
javascript:void(0)：点击不会跳动，更安全
占位符适合开发阶段或功能暂未上线的链接
小白总结
target 决定点击后在当前页打开还是新标签页打开
页面内部跳转需要 ID，确保唯一性
占位符链接可以让开发更灵活，区分 # 和 javascript:void(0)
链接文字要清楚，让用户知道点击后会发生什么
最后生活化比喻：想象网页是一个小镇：
href 是指示牌上写的目的地
target 决定你走在主路还是开捷径
id 是门牌号
占位符是临时的“敬请期待”牌子
掌握了这些，你就能轻松写出既美观又实用的超链接，让网页更方便浏览。