HTML 链接

链接是万维网的核心：从一个页面跳到另一个页面，靠的就是 <a> 标签。链接可以指向站内页面、外部网站、文件，甚至本页的某个位置。这一节讲链接的写法、打开方式、绝对路径与相对路径，以及锚点跳转等实用技巧。

基本链接写法

链接用 <a>（anchor，锚）标签创建，最关键的是 href 属性，它填写目标地址；标签中间的文字是用户看到的"链接文字"：

<a href="https://example.com">访问示例教程</a>

在浏览器中显示为：一行蓝色带下划线的文字"访问示例教程"，鼠标移上去变成小手，点击即可跳转。

在新窗口打开：target

默认链接在当前窗口跳转，会覆盖当前页面。加上 target="_blank" 可以在新标签页中打开：

<a href="https://example.com" target="_blank">新窗口打开示例教程</a>

如果希望链接指向的页面始终占据整个窗口，还可以用 target="_top"（常用于处理 iframe 嵌套）。

相对路径与绝对路径

href 可以填两种地址：

• 绝对路径：带完整协议的网址，如 https://example.com/html/html-tutorial.html，指向互联网上的资源。
• 相对路径：相对于当前文件的位置，如 page2.html、./doc/a.html，多用于站内链接。

<a href="about.html">站内相对链接</a>
<a href="images/pic.jpg">相对路径下的图片文件</a>

页面内锚点跳转

通过 id + # 可以实现"回到顶部""跳到某章节"这类页内定位。目标元素的 id 与 href 中 # 后面的名字要完全一致：

<p><a href="#end">跳到文末</a></p>
<!-- 页面中间还有大量内容 -->
<h2 id="end">文末总结</h2>

点击"跳到文末"后，页面会平滑滚动到 id 为 end 的标题处。

链接可以包住图片

链接文字不限于文本，图片、按钮等都可以放进 <a> 里，点击图片同样能跳转：

<a href="https://example.com">
  <img src="logo.png" alt="示例教程标志">
</a>

常见坑提醒

• href 不要拼成 herf，这是新手最高频的笔误。
• 站内相对路径要写对层级：../ 表示上一级目录，别多写或少写。
• # 后跟的是 id 而不是 class；id 在页面中必须唯一，重复时跳转结果不可预期。

小结

<a href="地址" target="_blank">链接内容</a> 是链接的标准写法；支持绝对/相对路径与 #id 锚点跳转，还能包住图片。链接把无数网页连成一张大网，是浏览网页最常用的交互。