HTML 链接


链接(link)就是Web上文档(或资源)的“地址”。


示例

试一个——示例

HTML链接
本例演示了如何在HTML文档里创建链接。

在新窗口中打开链接
本例演示了如何在新窗口中打开链接,这样访问者就不必离开你的网站了。

(本页底部提供了更多示例)


超链接、锚和链接

按照Web的术语,超链接(hyperlink)是对Web资源的一个引用。

超链接可以指向任何Web资源:HTML页面、图像、声音文件、电影等等。

锚(anchor)是一个用于定义超链接目标的术语。

HTML锚元素<a>既用于定义超链接,也用于定义锚。

当<a>元素指向一个资源时,我们称之为HTML链接(HTML link);当<a>元素定义一个文档里的地址时,我们称之为HTML锚(HTML anchor)。


HTML链接

链接语法:

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

起始标签里包含了跟链接有关的属性。

元素内容(“链接文本”)定义了将显示出的部分。

注意:你不但可以为文本创建链接,还可以为图像或其他HTML元素创建链接。


href属性

href属性用于定义链接的“地址”。

下面的<a>元素定义了一个指向yige.org的链接:

<a href="http://yige.org">访问yige!</a>

上述代码在浏览器中的显示效果如下:

访问yige!


target属性

target属性定义了将在哪里打开链接。

以下代码将在新窗口中打开链接。

示例

<a href="http://yige.org/"
target="_blank">访问yige!</a>

试一个 »

name属性

若<a>元素用到了name属性,那么它定义的是HTML文档里的一个具名锚(named anchor)。

具名锚在显示上不会有什么特别,网页访问者是看不见它们的。

定义具名锚:

<a name="label">任何内容</a>

定义指向具名锚的链接:

<a href="#label">任何内容</a>

href属性值里的“#”符号表明,链接目标是当前文档里的一个具名锚。

示例:

HTML文档里的一个具名锚:

<a name="tips">实用技巧</a>

从相同文档链接至“实用技巧”部分:

<a href="#tips">
跳转至“实用技巧”部分</a>

从别的文档链接至“实用技巧”部分:

<a href="http://yige.org/html_tutorial.htm#tips">
跳转至“实用技巧”部分</a>


要点——实用技巧

在引用目录时,请始终以斜线结尾。像http://yige.org/html这样的地址,将导致向服务器发起两次HTTP请求。因为服务器会把斜线加上后,再向http://yige.org/html/发起一次请求。

具名锚常被用于在大型文档的开头创建“目录”:为文档中的每一章创建一个具名锚,然后把指向这些锚的链接放在文档开头。

如果当前网址里没有指定锚名,浏览器将转到文档的开头。这是正确的。


示例

更多示例

图像链接
本例演示了如何为图像添加链接。

链接到同一页面里的指定位置
本例演示了如何通过链接跳转至当前文档里的其他位置。

跳出框架
本例演示了当你的网站被限定在框架里时,如何跳出框架。

创建电子邮件链接
本例演示了如何制作一个能创建电子邮件的链接(需安装有邮件客户端程序)。

创建电子邮件链接之二
本例演示了如何制作一个创建更复杂的电子邮件的链接。


链接标签

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

粤ICP备11097351号-1