精通HTML5+CSS3+JavaScript网页设计(视频教学版)(第2版)
上QQ阅读APP看书,第一时间看更新

3.2 超链接标记<a>

超链接是指当鼠标单击一些文字、图片或其他网页元素时,浏览器会根据其指示载入一个新的页面或跳转到页面的其他位置。超级链接除了可链接文本外,还可链接各种多媒体,如声音、图像、动画等,通过它们可享受丰富多彩的多媒体世界。

建立超链接所使用的HTML标记为<a></a>。超链接最重要的有两个要素:超链接指向的目标地址和设置为超链接的网页元素。基本的超链接结构如下:

     <a href=URL>网页元素</a>

3.2.1 设置文本和图片的超链接

设置超链接的网页元素通常使用文本和图片。文本超链接和图片超链接通过<a></a>标记实现,将文本或图片放在<a>开始标记和</a>结束标记之间即可建立超链接。下面的实例将实现文本和图片的超链接。


【例3.2】(实例文件:ch03\3.2.html)

在IE 11.0中预览网页效果,如图3-3所示。用鼠标单击图片或文本即可实现链接跳转的效果。

图3-3 文本和图片链接效果

默认情况下,为文本添加超链接,文本会自动增加下画线,并且文本颜色变为蓝色,单击过的超链接,文本会变成暗红色。图片增加超链接以后,浏览器会自动给图片加一个粗边框。图片和文本超链接的下画线需要借助CSS样式完成,这里不做介绍,详见CSS部分。

3.2.2 超链接指向的目标类型

通过上面的讲解,读者会发现超链接的目标对象都是.html类型的文件。超链接不但可以链接到各种类型(如图片文件、声音文件、视频文件、word等)的文件,还可以链接到其他网站、ftp服务器、电子邮件等。

1.链接到各种类型的文件

超链接<a>标记的href属性指向链接的目标(可以是各种类型的文件)。如果是浏览器能够识别的类型,会直接在浏览器中显示;如果是浏览器不能识别的类型,在IE浏览器中会弹出文件下载对话框,如图3-4所示。

图3-4 IE中的文件下载对话框

【例3.3】(实例文件:ch03\3.3.html)

在IE 11.0中预览网页效果,如图3-5所示,实现链接到HTML文件、图片和Word文档。

图3-5 各种类型的链接

2.链接到其他网站或FTP服务器

在网页中,友情链接也是推广网站的一种方式。下列代码实现了链接到其他网站或FTP服务器的功能。

     <a href="http://www.baidu.com">链接百度</a>
     <a href="ftp://172.16.1.254">链接到FTP服务器</a>

技巧提示

这里FTP服务器用的是IP地址。为了保证代码的正确运行,请读者填写有效的FTP服务器地址。

3.设置电子邮件链接

在某些网页中,当访问者单击某个链接以后,会自动打开电子邮件客户端软件(如Outlook或Foxmail等)向某个特定的E-mail地址发送邮件,这个链接就是电子邮件链接。电子邮件链接的格式如下:

     <a href="mailto:电子邮件地址" >网页元素</a>

【例3.4】(实例文件:ch03\3.4.html)

在IE 11.0中预览网页效果,如图3-6所示,实现了电子邮件链接。

图3-6 链接到电子邮件

当读者单击【站长信箱】链接时,会自动弹出电子邮件客户端窗口以编写电子邮件,如图3-7所示。

图3-7 电子邮件客户端窗口

3.2.3 设置以新窗口显示超链接页面

默认情况下,当单击超链接时,目标页面会在当前窗口中显示并替换掉当前页面的内容。如果要实现在单击某个超链接后在新的浏览器窗口中显示目标页面,就需要使用<a>标记的target属性。target属性取值有4个,即_blank、_self、_top、_parent。由于HTML5不再支持框,所以_top、_parent这两个取值不常用。本小节仅为读者讲解_blank、_self值。其中,_blank表示在新窗口中显示超链接页面。_self表示在当前窗口中显示超链接页面。当省略target属性时,默认取值为_self。


【例3.5】(实例文件:ch03\3.5.html)

在IE 11.0中预览网页效果,如图3-8所示。

图3-8 新窗口页面