当前位置: 首页 > Web前端 > HTML

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

时间:2023-03-28 15:13:05 HTML

本课是学习超链接实现页面跳转。这是百度的主页。当你将鼠标指针滑过百度热搜文章时,指针的形状从箭头变成了一只小手。点击鼠标左键,将打开一个新页面,显示该热搜文章的内容。这个功能是如何实现的?只需使用超链接。什么是超链接?当鼠标划入文本时,文本变为蓝色,同时添加下划线,提醒浏览者这不是普通文本,而是可点击的链接。这段文字叫做HyperText,意思是超文本。这个词是由TedNelson在1960年代提出的。它是使Internet发挥作用的关键概念之一。空间文本信息被组织成网格文本。超链接就像在不同页面之间建立链接并允许访问不同网站页面的桥梁。有了它,您可以自由穿梭于网络世界。超链接是通过标准的双标签a来实现的,a是单词anchor的缩写,意思是锚点。要实现跳转功能,必须携带一个属性href,它是HypertextReference的缩写,意思是超文本引用,href的值是目标页面的地址,类似于图片的src属性。可以使用相对路径和绝对路径,标签对内的内容就是页面显示的文字。下面来实现一个页面跳转的案例。打开编辑器,新建一个文件anchor.html,在页面中插入两个a标签,在每个a标签中填入一些显示的文字,千峰教育,千峰前端。第一个a标签将href属性值定义为千峰教育(http://www.qfedu.com/)的URL,第二个标签没有定义任何属性。在浏览器中打开时,两者都显示出来了,但是这两个标签显示的样式明显不同,a标签的文本带有href属性。默认样式为带有下划线效果的蓝色。没有href属性的a标签文本不会有这些样式。鼠标指针的形状在划入千峰身前时依旧是一个小箭头,点击鼠标毫无反应。当鼠标指针进入前锋教育时,指针的形状变成一只小手,点击鼠标左键时。页面跳转至前锋教育官网。需要注意的是,如果跳转的目标页面地址是URL,需要加上http://前缀,否则无法实现页面跳转。但是当点击超链接的文本时,页面是在原来的窗口中打开的。当点击百度热搜中的一篇文章时,会打开一个新的浏览器窗口,页面会显示在新窗口中。如何实现这种效果?需要将新的属性目标添加到a标记中。该属性的作用是:定义超链接页面的打开方式,值定义为_self,表示链接的目标页面在当前窗口打开,值定义为_blank,表示链接的目标页面在新的浏览器窗口中打开。回到编辑器,给第一个a标签添加一个target属性,并将属性值设置为_self。回到浏览器,刷新点击前锋教育,它仍然会在当前窗口打开。可见_self也是超链接目标的默认值。回到编辑器,将target的值设置为_blank,刷新页面,再次点击,页面会在新窗口打开。使用超链接跳转页面——完成。文章视频链接点我。