前端程序员面试笔试通关宝典
上QQ阅读APP看书,第一时间看更新

2.3 常用超链接

根据前面介绍的前端基础知识,本节将介绍一些页面间链接和锚链接。

2.3.1 页面间链接

网页设计中,链接标记<a>用于实现超级链接。<a>标记是成对标记,主要属性如下。

· href:定义链接文件的地址。

· target:定义链接目标的位置。

(1)指向电子邮件的链接。在HTML页面中,可以建立E-mail链接。当浏览者单击链接后,系统会启动默认的本地邮件服务系统发送邮件。

     例如:<a href="XXX@qq.com">与我联系</a>。

(2)指向站点内部文件的链接。站点内部文件的链接是指在同一个网站内部不同的HTML页面之间的链接关系。在建立网站内部文件的链接时,要明确哪个页面是当前页,哪个页面是链接的目标文件。内部链接一般采用相对路径。

     例如:<a href="index.html">动物森林</a>。

(3)指向站点外部文件的链接。站点外部链接是指跳转到当前网站外部,与其他网站中的页面或元素之间的链接关系。这种链接的URL地址一般采用绝对路径,要有完整的URL地址,包括协议名、主机名、文件所在主机上的位N路径及文件名。

     例如:<a href="http//www.jumooc.com">聚慕课链接<a>。

(4)指向本页面中特定部分的链接。一个页面的内容较长,不能在一个窗口中满屏全部显示时,可使用指向页内的超级链接进行跳转,可以先定义锚点,再设置锚点的超级链接,过程如图2-1所示。

图2-1 设置锚点

(5)指向空链接。空链接是指未指定链接对象的链接,可用于向页面中的对象附加行为。

     例如:<a href="#">首页<a>。

2.3.2 锚链接

锚链接实际上就是链接文本,又叫锚文本,可以理解为关键词上带超链接的一种链接方式,且这个词本身可以作为对指向目标页面的内容概述。但是单页站锚链接与锚文本有所不同。

一般来讲,网站页面中增加的锚链接都和页面本身的内容有一定的必然联系。例如,行业网站上一般会增加一些同行网站的链接或者一些做网站建设的知名设计网站的链接。

下面介绍锚链接的几种方式。

1.图片锚链接

代码语法如下所示:

2.文字锚链接

代码语法如下所示:

     <a href="链接的地址" target="_blank">输入文字</a>
3.LOGO锚链接

代码语法如下所示:

     <img src="图片logo地址" border="0">

☆注意☆ 把以下代码加在已经存在的面板里(想选哪种方式就加哪段代码,不要全部都加)。

链接的样式代码如下所示:

(1)使链接变色。

(2)使链接字体变粗。

(3)触到链接时出现虚线。

(4)超链接的位置移动。

(5)给链接添加背景色。

锚链接代码如下所示: