关于前端:零基础教你学前端9超链接之页面跳转

6次阅读

共计 1151 个字符,预计需要花费 3 分钟才能阅读完成。

本节课来学习超链接实现页面间的跳转。

这是百度的首页,当把鼠标指针滑到百度热搜的文章上,指针形态由箭头变成了小手,点击鼠标左键,会关上一个新的页面,展现这篇热搜文章的内容。

这个性能是如何实现的呢?就是应用超链接。

什么是超链接?当鼠标划入文本时,文字变成蓝色,同时增加了下滑线,这就提醒浏览者这不是一般的文本而是可点击的链接。

这个文本被称作 HyperText 意为超文本,这个术语是由泰德 - 纳尔逊在 20 世纪 60 年代提出,是使互联网发挥作用的要害概念之一,超文本是用超链接的办法,将各种不同空间的文字信息组织在一起的网状文本。

超链接就像像桥梁建设了 不同页面之间的分割,实现了拜访不同网站中的页面,有了它 就能够在互联网的世界中自在穿梭。

超链接实现通过规范的双标签 a,a 是 anchor 单词的缩写,是锚的意思,要实现跳转性能必须携带一个属性 href,它是 Hypertext Reference 的缩写,意为超文本援用,href 的值是指标页面的地址,和图片的 src 属性相似。能够应用绝对和绝对路径,标签对内的内容为显示在页面中的文本。

咱们来实现一个页面跳转的案例。

关上编辑器,新建文件 anchor.html,向页面中插入两个 a 标签,给每个 a 标签中填入一些显示的文本,千锋教育、千锋前端。

第一个 a 标签定义 href 属性 值为千锋教育的网址 (http://www.qfedu.com/) 第二个标签不定义任何属性

在浏览器中关上,两个都体现进去了,可两个标签体现进去的款式显著不同,带有 href 属性的 a 标签文本。默认款式是蓝色的,并且带有下划线成果。没有 href 属性的 a 标签文本,就没有这些款式了。

鼠标指针划入千锋前端指针的形态依然是一个小箭头,点击鼠标也没有任何的响应。鼠标指针划入千锋教育,指针的形态变成了小手,点击鼠标左键的时候。页面跳转到了千锋教育的官网。

须要留神,跳转的指标页面地址,如果是一个网址,须要带上 http:// 前缀,否则就不能实现页面跳转。

可是当点击超链接的文本时,页面是在原来的窗口中关上的。在点击 百度热搜 的一篇文章上时,会关上一个新的浏览器窗口,页面在新的窗口里显示。

如何实现这个成果?须要给 a 标签增加一个新的属性 target,这个属性的作用是:定义超链接页面打开方式,值定义为 _self,示意链接的指标页面在以后窗口中关上,值定义为 _blank,示意链接的指标页面在新的浏览器窗口中关上。

回到编辑器,给第一个 a 标签增加 target 属性,属性值设置成 _self。回到浏览器,刷新点击千锋教育,依然在以后窗口中关上,能够看出 _self 就是也是超链接 target 的默认值。

回到编辑器,把 target 的值设置成 _blank,刷新页面,再次点击,页面在新窗口中关上了。

应用超链接跳转页面——完。

文章配套视频链接点我。

正文完
 0