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>

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 新窗口页面