W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML 链接



HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。


HTML链接 - 超链接

HTML链接是超链接。

超链接可以是一段文本或图像,您可以点击,并跳转到另一个文件。


HTML链接 - 语法

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

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

Example

<a href="http://www.w3schools.wang/html/">Visit our HTML tutorial</a>
尝试一下 »

href 属性指定目标地址 (http://www.w3schools.wang/html/)

链接文本 部分是可见的 (Visit our HTML tutorial)。

点击链接文本,就会跳转到相应的页面中去。

Note 链接文本不必一定是文本。图片或其他 HTML 元素都可以成为链接。
Note 请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3schools.wang/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3schools.wang/html/"。

本地链接

上面的例子使用了绝对URL(一个完整的网址)。

一个本地链接(链接到同一网站)指定一个相对的URL(没有 http://www....)。

Example

<a href="html_images.asp">HTML Images</a>
尝试一下 »

HTML链接 - 颜色

当鼠标移动一个链接时,通常会发生两件事情:

  • 鼠标箭头将变成一只小手
  • 链接元素的颜色将改变

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线
  • 访问过的链接显示为紫色并带有下划线
  • 点击链接时,链接显示为红色并带有下划线

可以通过使用样式更改默认颜色:

Example

<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 属性,你可以定义被链接的文档在何处显示。

下面的实例将会在新窗口打开文档:

Example

<a href="http://www.w3schools.wang/" target="_blank">Visit W3Schools!</a>
尝试一下 »
Target值 描述
_blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
_top 这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
framename 在指定的框架中打开链接文档

如果你的网页被锁在一个框架中,你可以使用 target="_top" 跳出框架:

Example

<a href="http://www.w3schools.wang/html/" target="_top">HTML5 tutorial!</a>
尝试一下 »

HTML链接 - 图像作为链接

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

Example

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
尝试一下 »
Note 添加 border:0 样式可以阻止 IE9 (以及更早版本) 显示图片的边框。

HTML链接 - 创建书签

id属性可用于创建在一个HTML文档书签标记。

Example

首先,创建带有id属性的书签:

<h2 id="tips">Useful Tips Section</h2>

然后,在HTML文档中创建一个链接到"有用的提示部分(id="tips")":

<a href="#tips">Visit the Useful Tips Section</a>

或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":

Example

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
尝试一下 »

HTML链接标签

标签 描述
<a>定义一个超级链接