![精通HTML5+CSS3+JavaScript网页设计(视频教学版)(第2版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/776/26846776/b_26846776.jpg)
3.2 超链接标记<a>
超链接是指当鼠标单击一些文字、图片或其他网页元素时,浏览器会根据其指示载入一个新的页面或跳转到页面的其他位置。超级链接除了可链接文本外,还可链接各种多媒体,如声音、图像、动画等,通过它们可享受丰富多彩的多媒体世界。
建立超链接所使用的HTML标记为<a></a>。超链接最重要的有两个要素:超链接指向的目标地址和设置为超链接的网页元素。基本的超链接结构如下:
<a href=URL>网页元素</a>
3.2.1 设置文本和图片的超链接
设置超链接的网页元素通常使用文本和图片。文本超链接和图片超链接通过<a></a>标记实现,将文本或图片放在<a>开始标记和</a>结束标记之间即可建立超链接。下面的实例将实现文本和图片的超链接。
【例3.2】(实例文件:ch03\3.2.html)
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P54_129341.jpg?sign=1738871438-1detldMh3TNgtYq1UmErw9G6W2pOn101-0-6ed3a274d4a9b07e07c46fdf764d8be0)
在IE 11.0中预览网页效果,如图3-3所示。用鼠标单击图片或文本即可实现链接跳转的效果。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P54_68426.jpg?sign=1738871438-gZ1uFQEskI6Q4IIMNBPtWJh3OpzM4f83-0-5a74eb0e3fdb3726bb75731488f04d53)
图3-3 文本和图片链接效果
默认情况下,为文本添加超链接,文本会自动增加下画线,并且文本颜色变为蓝色,单击过的超链接,文本会变成暗红色。图片增加超链接以后,浏览器会自动给图片加一个粗边框。图片和文本超链接的下画线需要借助CSS样式完成,这里不做介绍,详见CSS部分。
3.2.2 超链接指向的目标类型
通过上面的讲解,读者会发现超链接的目标对象都是.html类型的文件。超链接不但可以链接到各种类型(如图片文件、声音文件、视频文件、word等)的文件,还可以链接到其他网站、ftp服务器、电子邮件等。
1.链接到各种类型的文件
超链接<a>标记的href属性指向链接的目标(可以是各种类型的文件)。如果是浏览器能够识别的类型,会直接在浏览器中显示;如果是浏览器不能识别的类型,在IE浏览器中会弹出文件下载对话框,如图3-4所示。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P55_68441.jpg?sign=1738871438-DxRoMz5s5fE82T1l0DRnoYb9CVdN4Lax-0-15b078f3465a1156c59c3e7b5e237d51)
图3-4 IE中的文件下载对话框
【例3.3】(实例文件:ch03\3.3.html)
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P55_129342.jpg?sign=1738871438-aI7LlCp0NVP1DOjDBe4xbbmEvuVxfiDi-0-46e155c1f39535d384b24183c86afbba)
在IE 11.0中预览网页效果,如图3-5所示,实现链接到HTML文件、图片和Word文档。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P56_68543.jpg?sign=1738871438-X6ta5kg1Jcc3G8OlJesyrjwHOTFz5kn4-0-152900092c5da7201e9104c93c5f41a4)
图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)
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P56_129345.jpg?sign=1738871438-Rg1VyDdCzdGmeo0vEmc0Znhurbn6RknY-0-5bd8572a5b499ad753abd117b9fec1d9)
在IE 11.0中预览网页效果,如图3-6所示,实现了电子邮件链接。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P57_68651.jpg?sign=1738871438-s280Vcbub43c9Nax092ozOAO5g1nGzaU-0-386fefff14391dc115c9a2b5d305e503)
图3-6 链接到电子邮件
当读者单击【站长信箱】链接时,会自动弹出电子邮件客户端窗口以编写电子邮件,如图3-7所示。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P57_68652.jpg?sign=1738871438-3RDI2rhsx7NWQtroWOepQOXwECtPupSe-0-caee700c0cfad65fadf18adca1d0955e)
图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)
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P57_129346.jpg?sign=1738871438-zQ2qSSDEK7AjchoipA1ZEwCUSNhYwQti-0-979cf4649c4aef9f281ed34957308471)
在IE 11.0中预览网页效果,如图3-8所示。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P57_68712.jpg?sign=1738871438-WlbdwCePi2UNiGuEPpbYzFQXWggvF8qT-0-432cbde569b9df5669c64ab57a1fbfa7)
图3-8 新窗口页面