跳到主要内容

HTML 链接

链接允许用户从一个页面跳转到另一个页面或页面的某个部分。

超链接简介​

单击链接可以跳转到另一个文档。 将鼠标移到链接上时，鼠标箭头将变成一只小手。

提示

链接包含的不一定是文本。链接可以包含图像或任何其他除了超链接以外的 HTML 元素。

<a href="https://rucoding.com">入扣网</a>
about:blank

a元素最重要的属性是 href 属性，它指定链接的地址。

链接文本是可见的部分。

单击链接文本，将会跳转到指定的URL地址。

默认情况下，链接将在所有浏览器中显示如下：
未访问过的链接带有下划线和蓝色
访问过的链接带有下划线和紫色
活动链接（鼠标点击时）带有下划线和红色

提示

链接当然可以用CSS设置样式，以获得更好的体验！

target属性​

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

target属性指定打开链接文档的方式。

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

  • _self 默认值，在当前窗口中打开页面
  • _blank 在新窗口或选项卡中打开页面
  • _parent 在父框架中打开页面，如果没有父级框架，行为与 _self 相同。
  • _top 在最顶端的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有，行为与 _self 相同。
<p><a href="https://rucoding.com" target="_self">入扣网</a></p>
<p><a href="https://rucoding.com" target="_blank">入扣网</a></p>
<p><a href="https://rucoding.com" target="_parent">入扣网</a></p>
<p><a href="https://rucoding.com" target="_top">入扣网</a></p>
about:blank

绝对地址与相对地址​

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

<h2>绝对地址</h2>
<p><a href="https://www.baidu.com" target="_blank">百度</a></p>
<p><a href="https://www.qq.com" target="_blank">腾讯QQ</a></p>

<h2>相对地址</h2>
<p><a href="element">HTML 元素</a></p>
<p><a href="/learn/css">CSS 教程</a></p>
about:blank

链接标题​

title属性指定有关元素的额外信息。 当鼠标悬停到元素上时，信息显示为提示文本。

<p><a href="https://www.baidu.com" target="_blank" title="将在新窗口打开">百度</a></p>
<p><a href="element" title="HTML 元素">HTML 元素</a></p>
about:blank

链接到邮箱​

在href属性中使用mailto:来打开用户电子邮件程序的链接 ： 

<p><a href="mailto:admin@rucoding.com">发送电子邮件</a></p>
about:blank

链接到电话号码​

在href属性中使用tel:来打开用户通话程序的链接 ：

<p><a href="tel:13000000000">拨打电话</a></p>
about:blank

链接到页面的某一部分​

要链接到的部分元素必须声明id属性，链接的href属性使用声明的id值，id值前带#号，如：

<p><a href="#blue">链接到blue</a></p>
<div style="height: 100px;background: red" id="red">red</div>
<div style="height: 100px;background: green" id="green">green</div>
<div style="height: 100px;background: blue" id="blue">
    blue
    <p><a href="#" style="color:white">回到顶部</a></p>
</div>
about:blank
提示

如 HTML 规范所定义的那样，你可以使用 href="#top" 或空片段（href="#"）来链接到当前页面的顶部。

HTML 参考​

名称描述