25. 超链接 a 标签基础

本节目标：学会用 <a> 标签创建能点击跳转的超链接，理解 href、target、title 三个核心属性的作用。

超链接是网页的灵魂。没有链接，网页就是一座孤岛——只能自己待着，哪儿也去不了。

a 标签的基本结构

<a> 是 anchor（锚点）的缩写，用来创建一个可以点击跳转的链接。它的核心是 href 属性，告诉浏览器”点我之后去哪里”。

<p>
  欢迎访问
  <a href="https://www.example.com">示例网站</a>。
</p>

效果就是”示例网站”这几个字变成蓝色带下划线，点击后跳转到指定地址。

href 属性：链接去哪

href 是 hypertext reference（超文本引用）的缩写。它支持两种写法。

绝对路径：完整的网址，包含协议和域名。

<a href="https://www.mozilla.org/zh-CN/">Mozilla 官网</a>

相对路径：相对于当前文件位置的路径。

<!-- 同一目录下的文件 -->
<a href="about.html">关于我们</a>

<!-- 子目录中的文件 -->
<a href="blog/post-1.html">第一篇文章</a>

<!-- 上级目录的文件 -->
<a href="../contact.html">联系我们</a>

Tip

实际项目中优先用相对路径。万一以后换域名，相对路径的链接一个都不用改。

target 属性：链接怎么打开

默认情况下，点击链接会在当前页面跳转（覆盖当前页）。如果你想在新标签页打开，加上 target="_blank"。

<a href="https://www.example.com" target="_blank">新标签页打开</a>

Note

target="_blank" 有个安全隐患——新页面可以通过 window.opener 访问原页面。加上 rel="noopener noreferrer" 才能安全使用。下章会详细讲。

其他 target 值现在很少用，了解一下就行：

_self：当前页面打开（默认值）
_parent：在父框架中打开
_top：在整个窗口中打开

title 属性：悬停提示

鼠标悬停在链接上时，会显示一小段提示文字。

<a href="https://www.example.com" title="点击访问示例网站的首页">
  示例网站
</a>

Note

title 的提示只有鼠标用户能看到，键盘用户和屏幕阅读器用户拿不到。如果信息很重要，别只放在 title 里，直接写在正文中更靠谱。

链接文本怎么写

屏幕阅读器用户经常通过快速扫描链接来定位页面内容。如果你的链接文本全是”点击这里”，他们就分不清哪个是哪个。

好的写法：描述链接指向的内容。

<a href="https://www.mozilla.org/firefox/">下载 Firefox</a>

不好的写法：空洞无意义。

<a href="https://www.mozilla.org/firefox/">点击这里</a>下载 Firefox

块级链接

<a> 可以包裹整块内容——标题、图片、甚至整个 div。

<a href="https://developer.mozilla.org/zh-CN/">
  <h2>MDN Web 文档</h2>
  <p>学习 Web 开发技术的权威教程。</p>
</a>

整块内容都变成可点击区域，点击任意位置都能跳转。

Tip

图片链接也是同样的原理——把 <img> 放进 <a> 里就行。下下章专门讲。

本章小结

属性	作用	必填
`href`	指定链接目标地址	是
`target`	控制打开方式（新标签/当前页）	否
`title`	鼠标悬停提示文字	否

链接文本要有意义，别写”点击那里”。下节我们学习不同类型的链接——锚点跳转、发邮件、打电话。