轻松上手,快乐学习!

HTML 链接


几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML 使用超级链接与网络上的另一个文档相连。


HTML 超链接(链接)

HTML 链接是超链接。

您可以单击一个链接并跳转到另一个文档。

当您将鼠标移到链接上时,鼠标箭头将变成一只小手。

注释: 链接不必是文本。链接可以是图像或任何其他 HTML 元素!


HTML 链接语法

HTML <a> 标签定义了一个超链接。它使用以下语法:

<a href="url">link text</a>

最最重要的是 <a> 标签的 href 属性,表示链接的目标。

链接文本 是读者可以看到的部分。

实例

点击这个超链接会把用户带到 BEGTUT 的首页。:

<a href="https://www.begtut.com/">访问 BEGTUT.com!</a>
亲自试一试 »

默认情况下,链接将在所有浏览器中显示如下:

  • 未访问的链接带有下划线和蓝色
  • 访问的链接带有下划线和紫色
  • 活动链接带有下划线和红色

提示: 链接可以用 CSS 样式,以获得另一种外观!


HTML 链接 - target 属性

使用 Target 属性,你可以定义被链接的文档在何处显示。

target 属性指定打开链接文档的位置。

target 属性可以具有以下值之一:

  • _self - 默认,在单击时在同一窗口/选项卡中打开文档
  • _blank - 在新窗口或选项卡中打开文档
  • _parent - 在父级框架中打开文档
  • _top - 在整个窗口中打开文档

实例

使用 target="_blank" 在新浏览器窗口或选项卡中打开链接的文档:

<a href="https://www.begtut.com/" target="_blank">访问 BEGTUT!</a>
亲自试一试 »

绝对 URL 与相对 URL

上面的两个示例都在 href 属性中使用绝对 URL (完整的网址)。

本地链接(指向同一网站中的页面的链接)使用相对 URL 指定(不包含 https://www 部分:

实例

<h2>绝对 URLs</h2>
<p><a href="https://www.bt.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>相对 URLs</h2>
<p><a href="html_images.php">HTML 图片</a></p>
<p><a href="/css/default.php">CSS 教程</a></p>
亲自试一试 »

HTML 链接 - 使用图像作为链接

要使用图像作为链接,只需将 <img> 标签放在 <a> 标签内:

实例

<a href="default.php">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
亲自试一试 »

链接到 Email

href 使用 mailto: 创建一个链接,打开用户的电子邮件程序(让他们发送新的电子邮件):

实例

<a href="mailto:someone@example.com">发送邮件</a>
亲自试一试 »

按钮作为链接

要使用 HTML 按钮作为链接,必须添加一些 JavaScript 代码。

JavaScript 允许您指定在某些事件中发生的操作,例如单击按钮:

实例

<button onclick="document.location='default.php'">HTML 教程</button>
亲自试一试 »

提示: 了解有关 JavaScript 教程 的更多信息 。


链接标题

title 属性指定有关元素的额外信息。当鼠标移到元素上时,信息通常显示为工具提示文本。

实例

<a href="https://www.begtut.com/html/" title="访问我们的 HTML 教程">访问我们的 HTML 教程</a>
亲自试一试 »

绝对 URL 和相对 URL 的更多信息

实例

使用完整URL链接到网页:

<a href="https://www.begtut.com/html/default.php">HTML 教程</a>

亲自试一试 »

实例

链接到当前网站上 html 文件夹中的页面:

<a href="/html/default.php">HTML 教程</a>

亲自试一试 »

实例

链接到与当前页面位于同一文件夹中的页面:

<a href="default.php">HTML 教程</a>

亲自试一试 »

阅读有关文件路径的更多信息: HTML 文件路径


本章小结

  • 使用 <a> 元素定义链接
  • 使用 href 属性定义链接地址
  • 使用 target 属性定义打开链接文档的位置
  • 使用 <img> 元素 (内部 <a>) 将图像用作链接
  • 使用 href 属性中的 mailto: 创建一个链接,打开用户的电子邮件程序

HTML 链接标签

标签 描述
<a>定义超链接

如需所有可用的 HTML 标签的完整列表,请访问 HTML 标签参考手册