On this page

HTML 链接

category: HTML / CSS

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

HTML 链接 - 超链接

HTML 链接是超链接。 您可以单击链接并跳转到另一个文档。 当您将鼠标移到链接上时，鼠标箭头会变成一只小手。 注意：链接不一定是文本。链接可以是图像或任何其他 HTML 元素！

HTML 链接 - 语法

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

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

元素最重要的属性<a> 链接文本是读者可见的部分。 单击链接文本，会将读者发送到指定的 URL 地址。

例子

此示例显示如何创建 codewhy.net 的链接：

<a href="https://www.codewhy.net/">Visit codewhy.net !</a>

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

  • 未访问的链接带有下划线且呈蓝色
  • 访问过的链接带有下划线且呈紫色
  • 活动链接带有下划线并呈红色

提示：当然可以使用 CSS 设置链接样式，以获得另一种外观！

HTML 链接 - 目标属性

默认情况下，链接页面将显示在当前浏览器窗口中。要更改此设置，您必须为链接指定另一个目标。 该target属性指定在哪里打开链接文档。 该target属性可以具有以下值之一：

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

例子

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

<a href="https://www.codewhy.net/" target="_blank">Visit codewhy!</a>

绝对 URL 与相对 URL

上面的两个示例都在属性中使用绝对 URL（完整网址）href。 本地链接（指向同一网站内页面的链接）使用相对 URL指定 （不带“https://www”部分）：

例子

<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>：

例子

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

链接到电子邮件地址

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

例子

<a href="mailto:[email protected]">Send email</a>

按钮作为链接

要使用 HTML 按钮作为链接，您必须添加一些 JavaScript 代码。 JavaScript 允许您指定某些事件发生的情况，例如单击按钮：

例子

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

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

链接标题

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

例子

<a href="https://www.codewhy.net/html/" title="Go to codewhy HTML section">Visit our HTML Tutorial</a>

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

例子

使用完整的 URL 链接到网页： 

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

例子

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

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

例子

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

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

章节总结

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