超链接



实例

指向 赵智鹏鹰立的博客 的超链接:

<网页>
<主体>
<超链接 超引用=“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 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</段落>
</主体>
</网页>



 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM