千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:北京千锋IT培训  >  技术干货  >  html5技术干货  > 零基础教你学前端——超链接之页面跳转

零基础教你学前端——超链接之页面跳转

来源:千锋教育
发布人:syq
时间: 2022-11-07 11:34:47

  本节课来学习超链接实现页面间的跳转。这是百度的首页,当把鼠标指针滑到百度热搜的文章上,指针形状由箭头变成了小手,点击鼠标左键,会打开一个新的页面,展示这篇热搜文章的内容。

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

超链接之页面跳转

  什么是超链接?

  当鼠标划入文本时,文字变成蓝色,同时添加了下滑线,这就提示浏览者这不是普通的文本而是可点击的链接。这个文本被称作HyperText意为超文本,这个术语是由泰德-纳尔逊在20世纪60年代提出,是使互联网发挥作用的关键概念之一,超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。

  超链接就像像桥梁建立了不同页面之间的联系,实现了访问不同网站中的页面,有了它就可以在互联网的世界中自由穿梭。

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

  我们来实现一个页面跳转的案例。打开编辑器,新建文件anchor.html,向页面中插入两个a标签,给每个a标签中填入一些显示的文本,千锋教育、千锋前端。

35

  第一个a标签定义href属性值为千锋教育的网址第二个标签不定义任何属性在浏览器中打开,两个都表现出来了,可两个标签表现出来的样式明显不同,带有href属性的a标签文本。默认样式是蓝色的,并且带有下划线效果。没有href属性的a标签文本,就没有这些样式了。

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

  需要注意,跳转的目标页面地址,如果是一个网址,需要带上http://前缀,否则就不能实现页面跳转。可是当点击超链接的文本时,页面是在原来的窗口中打开的。在点击百度热搜的一篇文章上时,会打开一个新的浏览器窗口,页面在新的窗口里显示。

  如何实现这个效果?

  需要给a标签添加一个新的属性target,这个属性的作用是:定义超链接页面打开方式,值定义为_self,表示链接的目标页面在当前窗口中打开,值定义为_blank,表示链接的目标页面在新的浏览器窗口中打开。

  回到编辑器,给第一个a标签添加target属性,属性值设置成_self。回到浏览器,刷新点击千锋教育,仍然在当前窗口中打开,可以看出_self就是也是超链接target的默认值。

36

  回到编辑器,把target的值设置成_blank,刷新页面,再次点击,页面在新窗口中打开了。使用超链接跳转页面——完。

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

10年以上业内强师集结,手把手带你蜕变精英

请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通

免费领取

今日已有369人领取成功

刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取

猜你喜欢LIKE

说说Vuex原理

2022-11-14

vuex怎么拿数据

2022-11-14

零基础教你学前端——图片标签进阶

2022-11-07

最新文章NEW

零基础教你学前端——超链接之页面跳转

2022-11-07

零基础教你学前端——图片标签拓展

2022-11-07

零基础教你学前端——什么是网页?

2022-11-07

相关推荐HOT

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>