二维码
搜索 ×

HTML 链接

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

HTML 链接

链接几乎在所有网页中都可以找到。链接允许用户从一个页面单击到另一个页面。

HTML 链接 - 超链接

HTML 链接是超链接。

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

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

注意： 链接不必是文本。链接可以是图像 或任何其他 HTML 元素！

HTML 链接 - 语法

HTML 标记定义超链接。 它具有以下语法：<a>

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

该元素最重要的属性是 href 属性，它指示链接的目标。<a>

链接文本是读者可见的部分。

单击链接文本，会将读者发送到指定的 URL 地址。

1
2
3
此示例演示如何创建指向 adamsw.com 的链接：

<a href="http://www.adamsw.com/">Visit adamsw.com!</a>

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

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

提示： 当然，链接可以用 CSS 设置样式，以获得 再看一眼！

HTML 链接 - 目标属性

默认情况下，链接的页面将显示在当前浏览器窗口中。 若要更改此设置，必须为链接指定另一个目标。

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

该属性可以具有以下值之一：target

_self-违约。在以下位置打开文档 单击时的窗口/选项卡相同
_blank- 在新窗口或标签页中打开文档
_parent- 在父框架中打开文档
_top- 在窗口的整个正文中打开文档

1
2
3
使用 target=“_blank” 在新的浏览器窗口或标签页中打开链接的文档：

<a href="http://www.adamsw.com/" target="_blank">Visit adamsw!</a>

绝对 URL 与相对 URL

上面的两个示例都使用绝对 URL（完整的 Web 地址） 在属性中。href

本地链接（指向同一网站内页面的链接）使用相对 URL（不 “https://www”部分）：

1
2
3
4
5
6
7
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

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

要使用图片作为链接，只需将标签放在标签内即可：<img>``<a>

1
2
3
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

链接到电子邮件地址

在属性内部使用，以创建一个链接，该链接将打开用户的电子邮件程序（到 让他们发送一封新电子邮件）： mailto: href

1
<a href="mailto:someone@example.com">Send email</a>

按钮作为链接

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

JavaScript 允许您指定在某些事件中发生的情况，例如单击按钮：

1
<button onclick="document.location='default.asp'">HTML Tutorial</button>

提示： 在我们的 JavaScript 教程中了解有关 [JavaScript] 的更多信息。

链接标题

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

1
<a href="http://www.adamsw.com/html/" title="Go to adamsw HTML section">Visit our HTML Tutorial</a>

详细了解绝对 URL 和相对 URL

1
2
3
使用完整 URL 链接到网页：

<a href="https://www.adamsw.com/html/default.asp">HTML tutorial</a>

1
2
3
链接到位于当前网站上的 html 文件夹中的页面：

<a href="/html/default.asp">HTML tutorial</a>

1
2
3
链接到与当前页面位于同一文件夹中的页面：

<a href="default.asp">HTML tutorial</a>

您可以在 HTML 一章中阅读有关文件路径的更多信息 [文件路径]。

本章小结

  • 使用元素定义链接<a>
  • 使用属性定义链接地址href
  • 使用该属性定义打开链接文档的位置target
  • 使用元素（内部） 将图像用作链接<img>``<a>
  • 使用属性内的方案创建用于打开用户电子邮件程序的链接 mailto: href

HTML Link标签

Tag Description
<a> Defines a hyperlink

有关所有可用 HTML 标记的完整列表，请访问我们的 [HTML 标记参考]。

推荐教程