HTML 链接

链接几乎存在于所有网页中。链接允许用户通过点击在不同页面间跳转。

HTML 链接 - 超链接

HTML 链接就是超链接。

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

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

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

HTML 链接 - 语法

HTML <a> 标签定义超链接。其语法如下：

<a href="url">链接文本</a>

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

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

点击链接文本会将读者带到指定的 URL 地址。

实例

此例展示如何创建指向 W3School.com.cn 的链接：

<a href="https://www.w3school.com.cn/">访问 W3School.com.cn！</a>

亲自试一试

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

未访问的链接带下划线且为蓝色
已访问的链接带下划线且为紫色
活动链接带下划线且为红色

提示：当然可以使用 CSS 对链接进行样式设置，以获得不同的外观！

HTML 链接 - target 属性

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

target 属性指定在何处打开链接的文档。

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

_self - 默认值。在点击链接的同一窗口/标签页中打开文档
_blank - 在新窗口或标签页中打开文档
_parent - 在父框架中打开文档
_top - 在窗口的整个主体中打开文档

实例

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

<a href="https://www.w3school.com.cn/" target="_blank">访问 W3School！</a>

亲自试一试

绝对 URL 与相对 URL

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

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

实例

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

<h2>相对 URL</h2>
<p><a href="html_images.asp">HTML 图像</a></p>
<p><a href="/css/index.asp">CSS 教程</a></p>

亲自试一试

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

要将图像用作链接，只需将 <img> 标签放在 <a> 标签内：

实例

<a href="index.asp">
<img src="smiley.gif" alt="HTML 教程" style="width:64px;height:64px;">
</a>

亲自试一试

链接到电子邮件地址

在 href 属性中使用 mailto: 来创建一个链接，用于打开用户的电子邮件程序（让他们发送新邮件）：

实例

<a href="mailto:someone@example.com">发送电子邮件</a>

亲自试一试

将按钮用作链接

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

JavaScript 允许您指定在某些事件（例如按钮点击）发生时执行的操作：

实例

<button onclick="document.location='index.asp'">HTML 教程</button>

亲自试一试

提示：在我们的 JavaScript 教程中了解更多关于 JavaScript 的知识。

链接标题

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

实例

<a href="https://www.w3school.com.cn/html/" title="转到 W3School 的 HTML 部分">访问我们的 HTML 教程</a>

亲自试一试

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

实例

使用完整 URL 链接到网页：

<a href="https://www.w3school.com.cn/html/index.asp">HTML 教程</a>

亲自试一试

实例

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

<a href="/html/index.asp">HTML 教程</a>

亲自试一试

实例

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

<a href="index.asp">HTML 教程</a>

亲自试一试

您可以在 HTML 文件路径章节中阅读更多关于文件路径的信息。

本章总结

使用 <a> 元素定义链接
使用 href 属性定义链接地址
使用 target 属性定义在何处打开链接的文档
使用 <img> 元素（在 <a> 内）将图像用作链接
在 href 属性中使用 mailto: 方案创建可打开用户电子邮件程序的链接

HTML 链接标签

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

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。