实例
指向 赵智鹏鹰立的博客 的超链接:
<网页>
<主体>
<超链接 超引用=“https://www.cnblogs.com/zzpyl/“>赵智鹏鹰立</超链接>
</主体>
</网页>
浏览器支持
元素 | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
<超链接> | 是 | 是 | 是 | 是 | 是 |
所有浏览器都支持 <超链接> 标签。
定义和用法
<超链接> 标签定义超链接,用于从一张页面链接到另一张页面。
<超链接> 元素最重要的属性是 超引用 属性,它指示链接的目标。
在所有浏览器中,链接的默认外观是:
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
提示:您可以使用 层叠样式表 伪类 向文本超链接添加复杂而多样的样式。
术语解释
什么是超文本?
标记语言的真正威力在于其收集能力,它可以将收集来的文档组合成一个完整的信息库,并且可以将文档库与世界上的其他文档集合链接起来。
这样的话,读者不仅可以完全控制文档在屏幕上的显示,还可以通过超链接来控制浏览信息的顺序。这就是 HTML 和 XHTML 中的 “HT” - 超文本(hypertext),就是它将整个 Web 网络连接起来。
超文本的基础知识
超文本的基本特征就是可以超链接文档;你可以指向其他位置,该位置可以在当前的文档中、局域网中的其他文档,也可以在因特网上的任何位置的文档中。这些文档组成了一个杂乱的信息网。目标文档通常与其来源有某些关联,并且丰富了来源;来源中的链接元素则将这种关系传递给浏览者。
超链接可以用于各种效果。超链接可以用在目录和主题列表中。浏览者可以在浏览器屏幕上单击鼠标或在键盘上按下按键,从而选择并自动跳转到文档中自己感兴趣的那个主题,或跳转到世界上某处完全不同的集合中的某个文档。
超链接还可以向浏览者指出有关文档中某个主题的更多信息。例如,“如果您想了解更详细的信息,请参阅某某页面。”。作者可以使用超链接来减少重复信息。例如,我们建议创作者在每个文档中都签署上自己的姓名。这样就可以使用一个将名字和另一个包含地址、电话号码等信息的单独文档链接起来的超链接,而不必在每个文档中都包含完整的联系信息。
超链接(hyper text),或者按照标准叫法称为锚(anchor),是使用 <超文本>(<a>) 标签标记的,可以用两种方式表示。锚的一种类型是在文档中创建一个热点,当用户激活或选中(通常是使用鼠标)这个热点时,会导致浏览器进行链接。浏览器会自动加载并显示同一文档或其他文档中的某个部分,或触发某些与因特网服务相关的操作,例如发送电子邮件或下载特殊文件等。锚的另一种类型会在文档中创建一个标记,该标记可以被超链接引用。
还有一些与超链接相关联的鼠标相关事件。这些事件与 JavaScript 结合使用可以产生一些令人激动的效果。
注释
锚的这两种类型都使用同样的标签;也许这就是它们拥有同样的名称的原因。但是我们发现,如果将它们区分开,把提供热点和超链接地址的锚看作“链接”,而用于标记文档的目标部分的锚称为“锚”,那么您将更容易理解这两种类型的锚。
提示和注释
提示:如果不使用 超引用 属性,则不可以使用如下属性:下载, 超引用语言, 媒体, 关系, 目标 以及 类型 属性。
提示:被链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标(目标 属性)。
提示:请使用 层叠样式表 来设置链接的样式。
HTML 4.01 与 HTML5 之间的差异
在 HTML 4.01 中,<超链接> 标签可以是超链接或锚。在 HTML5 中,<超链接> 标签始终是超链接,但是如果未设置 超引用 属性,则只是超链接的占位符。
HTML5 提供了一些新属性,同时不再支持一些 HTML 4.01 属性。
属性
新: HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
字符集 | 字符编码 | HTML5 中不支持。规定被链接文档的字符集。 |
坐标 | 坐标值 | HTML5 中不支持。规定链接的坐标。 |
下载 |
文件名
|
规定被下载的超链接目标。 |
超引用 | 地址 | 规定链接指向的页面的 URL。 |
超引用语言 | 程序语言_代码文本 | 规定被链接文档的语言。 |
媒体 | 媒体_询问 | 规定被链接文档是为何种媒介/设备优化的。 |
名字 | 文档章节_名字 | HTML5 中不支持。规定锚的名称。 |
关系 | 文本 | 规定当前文档与被链接文档之间的关系。 |
反关系(rev) | 文本 | HTML5 中不支持。规定被链接文档与当前文档之间的关系。 |
形状 | 默认 矩形 圆形 多边形 |
HTML5 中不支持。规定链接的形状。 |
目标 | 新窗口 父窗口 本窗口 顶级窗口 指定窗口 |
规定在何处打开链接文档。 |
类型 | 媒体 类型 | 规定被链接文档的的 媒体 类型。 |
全局属性
<超链接> 标签支持 HTML 中的全局属性。
事件属性
<超链接> 标签支持 HTML 中的事件属性。
亲自试一试 - 实例
- 创建超级链接
- 本例演示如何在 超文本(HTML )文档中创建链接。
-
<网页>
<主体>
<段落>
<超链接 超引用=“/index.html“>本文本</超链接> 是一个指向本网站中的一个页面的链接。</段落>
<段落><超链接 超引用=“http://www.microsoft.com/“>本文本</超链接> 是一个指向万维网上的页面的链接。</段落>
</主体>
</网页> - 将图像作为链接
- 本例演示如何使用图像作为链接。
-
<网页>
<主体>
<段落>
您也可以使用图像来作链接:
<超链接 超引用=“https://www.w3school.com.cn/example/html/lastpage.html“>
<图像 边框=“0“ 资源地址=“https://www.w3school.com.cn/i/eg_buttonnext.gif“ />
</超链接>
</段落>
</主体>
</网页> - 链接到同一个页面的不同位置
- 本例演示如何使用链接跳转至文档的另一个部分
-
<网页>
<主体>
<段落>
<超链接 超引用=“#第四章“>查看 章节4。</超链接>
</段落>
<标题2>章节1</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节2</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节3</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2><超链接 名字=“第四章“>章节4</超链接></标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节5</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节6</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节7</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节8</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节9</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节10</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节11</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节12</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节13</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节14</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节15</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节16</标题2>
<段落>本章解释了ba bla bla</段落>
<标题2>章节17</标题2>
<段落>本章解释了ba bla bla</段落>
</主体>
</网页> - 在新的浏览器窗口打开链接
- 本例演示如何在新窗口打开一个页面,这样的话访问者就无需离开你的站点了。
-
<网页>
<主体>
<超链接 超引用=“https://www.cnblogs.com/zzpyl/“ 目标=“新窗口“>赵智鹏鹰立</超链接>
<段落>如果把链接的 目标 属性设置为 “新窗口“,该链接会在新窗口中打开。</段落>
</主体>
</网页> - 跳出框架
- 本例演示如何跳出框架,假如你的页面被固定在框架之内。
-
<网页>
<主体>
<段落>被锁在框架中了吗?</段落>
<超链接 超引用=“https://www.cnblogs.com/zzpyl/“ 目标=“顶级窗口“>请点击这里!</超链接>
</主体>
</网页> - 创建电子邮件链接
- 本例演示如何如何链接到一个邮件。(本例在安装邮件客户端程序后才能工作。)
-
<网页>
<主体>
<段落>
这是邮件链接:
<超链接 超引用=“mailto:someone@microsoft.com?subject=hello%20again“>发送邮件</超链接>
</段落>
<段落>
<粗体>注意:</粗体>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</段落>
</主体>
</网页> - 创建电子邮件链接 2
- 本例演示更加复杂的邮件链接。
-
<网页>
<主体>
<段落>
这是另一个 mailto 链接:
<超链接 超引用=“mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=summer%20party&body=you%20are%20invited%20to%20a%20big%20summer%20party!“>发送邮件!</超链接>
</段落>
<段落>
<粗体>注意:</粗体>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</段落>
</主体>
</网页>