HTML 链接

因为网站的各种页面都是由超级链接串接而成, 超级链接完成了页面之间的跳转.


HTML链接 - 超链接

HTML使用标签 <a> 来设置超文本链接

您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分

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

注意:链接不一定都是文本.它可以是图像或任何其他HTML标签.


HTML链接 - 语法

在HTML中, 链接使用<a>标签定义:

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

实例

<a href="https://www.uihtml.com/">新手教程(www.uihtml.com)</a>
运行 »

href 属性指定链接的目标地址( https://www.uihtml.com/ ).

链接文本显示为:新手教程(www.uihtml.com)

点击链接将跳转到目标地址

注意:如果子地址末尾没有正斜杠, 则可能会向服务器生成两个请求.许多服务器会自动在地址末尾添加正斜杠, 然后创建新请求.


本地链接

上面的示例使用绝对URL(完整的Web地址).

使用相对URL(不带https://www ....)指定本地链接(指向同一网站的链接).

实例

<a href="html_tutorial.html">HTML 教程</a>
运行 »


HTML链接颜色

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

  • 未访问的链接带有下划线和蓝色
  • 访问过的链接带有下划线和紫色
  • 点击链接时带有下划线和红色

您可以使用CSS更改默认颜色:

实例

<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>
运行 »

HTML链接 - 目标属性

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

target属性可以设置以下值:

  • _blank - 在新窗口中打开被链接文档
  • _self - 在相同的框架中打开被链接文档(这是默认的设置)
  • _parent - 在父框架中打开链接的文档
  • _top - 在整个窗口中打开被链接文档
  • framename - 在指定的框架中打开被链接文档

此示例将在新的浏览器窗口/选项卡中打开链接的文档:

实例

<a href="https://www.uihtml.com/" target="_blank">新手教程(www.uihtml.com)!</a>
运行 »

提示:如果您的网页被锁定在一个框架中, 您可以使用target="_top"来突破框架:

实例

<a href="https://www.uihtml.com/" target="_top">HTML5 教程!</a>
运行 »

HTML链接 - 图像链接

将图像用作链接是很常见的:

实例

<a href="html_links.html">
  <img src="/image/kenan.jpg" alt="HTML 教程" style="width:170px;height:353px;border:0;">
</a>
运行 »

注意: border:0;添加以防止IE9(及更早版本)在图像周围显示边框(当图像是链接时).


链接标题

title属性指定有关标签的额外信息.当鼠标移动在标签上时, 信息通常显示为工具提示文本.

实例

<a href="https://www.uihtml.com/" title="跳转到UIHTML官网">HTML5 教程</a>
运行 »

HTML链接 - 创建书签

HTML书签用于允许读者跳转到网页的特定部分.

如果您的网页很长, 书签会非常有用.

要创建书签, 您必须先创建书签标题, 然后添加一个链接.

单击链接后, 页面将滚动到带有书签的位置.

举个栗子

首先, 使用id属性创建书签:

<h2 id="C4">第4章</h2>

然后, 在同一页面中添加指向书签的链接("跳转到第4章"):

<a href="#C4">跳转到第4章</a>

或者, 从另一页面添加指向书签的链接("跳转到第4章"):

实例

<a href="html_demo.html#C4">跳转到第4章</a>
运行 »

外部路径

可以使用完整URL或相对于当前网页的路径引用外部页面.

此示例使用完整URL链接到网页:

<a href="http://www.uihtml.com/html_links.html">HTML 教程</a>

此示例链接到位于当前网站的html文件夹中的页面:

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

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

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

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


章节总结

  • 使用<a>标签定义链接
  • 使用href属性定义链接地址
  • 使用target属性定义被链接的文档在何处显示(在新的窗口打开, 还是在原有的窗口中打开)
  • 使用<img>标签(在<a>内)将图像设置成链接
  • 使用id属性(id =" value ")在页面中定义书签标记
  • 使用href属性(href ="# value ")链接到书签

HTML链接标记

标签 描述
<a> 定义链接