作者/来源:小睿 发布时间:2019-11-14
在我们浏览某些网站的网页时,总会看到超链接,会不由自主的点击链接,跳转到另一个页面去浏览。在互联网中,超链接无处不在,它是各个网页之间的桥梁,使得网页能够进行跳转。一个网站之中的页面也必须通过超链接连接起来才能称之为网站。超链接除了指向另一个网页之外,还可以指向邮箱地址、图片、文件等。超链接可以存在与各种格式下的文件中。
那么,耳熟能详的超链接到底是什么?你知道吗?
超链接在本质上属于一个网页的一部分,它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后,才能真正构成一个网站。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的页面或者当前页面中的某个部分。
关于超链接的基本介绍
a标签
向网页中添加a标签是实现超链接的重要方式,但不是唯一方式。本文后面所提到的超链接一般是指通过a标签添加的超链接。
<a href="https://www.xinruiyun.cn/">新睿云</a>
以上代码实现了一个超链接,指向一个网页。点击后可以访问连接指向的网页。
重要属性
在超链接中最主要的属性有三个,分别是:href、title、target。其他一些属性会在后面陆续出现。
href
href属性用于指示一个目标,该属性是a标签必不可少的,少了它超链接将不能跳转。href属性的值是一个链接,也就是网页或资源的地址。比如:href="https://www.xinruiyun.cn/",href的值是一个网页的地址。
链接可以是一个完整的地址,也可以是相对路径。对于外部连接通常使用完整的链接,链接必须包含所使用的协议(HTTP,HTTPS等),否则将是一个无效链接。
<a href="https://www.xinruiyun.cn/">新睿云</a>
<a href="www.xinruiyun.cn">新睿云</a>
上例中,第一个超链接的地址是完整的地址,包含了https协议,因此该超链接是有效的;第二个超链接的地址个缺少协议类型,因此是无效的超链接。
对于内部链接,通常使用的是相对路径。
<a href="../src/index.html">我的主页</a>
title
title属性可以为超链接设置一些介绍信息。当鼠标移到设置了title属性的超链接上时,会显示title属性值的内容。设置了title不仅可以提升用户体验,还可以提升网页的SEO(搜索引擎优化)。
target
target属性用于控制链接网页打开的位置(相对于当前网页)。默认情况下,是刷新当前网页所在的窗口,加载新的页面。
target属性值及描述:
_self:默认状态。在当前页面所在窗口打开链接的网页。
_blank:在当前浏览器中打开一个新窗口加载链接的网页。
_parent:在父窗口打开链接的网页。(有些页面可以通过等方式打开一些子窗口)
_top:清除当前窗口中打开的所有框架(子窗口),并在整个窗口打开链接的网页。
framename:在指定的框架中打开链接的网页。
使用得最最频繁的属性值是_self和_blank。至于_parent、_top和framename基本已不再使用。
锚链接
锚链接可以链接到本页面的特定位置,也可以链接到另一个页面的特定位置。其实现方式是添加锚标记。
当跳转到当前页面的特定位置时,直接将锚标记设为href属性的值。
<a href="#标记名">跳转到本页面的id标记处</a>
当跳转到另一个网页的特定位置时,将锚标记添加到链接地址的末尾。
<a href="https://www.xinruiyun.cn/#标记名">跳转到另一个页面的标记处</a>
关于“#标记名”,它其实是页面中某一个标签的id属性值。也就是说,如果要跳转到网页的某个位置,就先在这个位置所在的标签设置id属性,然后就可以通过锚链接跳转到这个位置了。
<a href="#标记名">跳转</a>
<标签名 id="标记名"></标签名>
当href属性的值为一个“#”时,表示该链接是指向页面顶部的,点击后可直接跳转到本页面顶部。
<a href"#">返回顶部</a>