![精通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=1739533817-wOLGM93rKoEkPNzkd3WYqGnQbAtSO4l1-0-7c1f830e7eb1cf7fa484b04e1eefd6bb)
在IE 11.0中预览网页效果,如图3-3所示。用鼠标单击图片或文本即可实现链接跳转的效果。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P54_68426.jpg?sign=1739533817-YqDCLSdFyF7FiZuJNBlqhTDqiswsY8o3-0-795b1f4f1b1d3141a4fe9da7105a3b16)
图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=1739533817-4OBHhkSoyzjeoUUhaRqUuNtQ252onz59-0-3656ba4dae323e40d36823d4c81e0752)
图3-4 IE中的文件下载对话框
【例3.3】(实例文件:ch03\3.3.html)
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P55_129342.jpg?sign=1739533817-RZ65BaCX287NFCMS8nmc33oAh25mEZ2O-0-18926ef5c7ba053439e4c02e85cdcae7)
在IE 11.0中预览网页效果,如图3-5所示,实现链接到HTML文件、图片和Word文档。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P56_68543.jpg?sign=1739533817-hMImKM2t13OQyxfLL4vMSVtmFtbBp0cK-0-c1b53440f8458a006e7f800b564653a9)
图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=1739533817-RoCuU5WnPGJ8FnZ1UQYvwFzpIqoO8UnE-0-e58ebc5b8b7ba217d6b44cd66e8aaa16)
在IE 11.0中预览网页效果,如图3-6所示,实现了电子邮件链接。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P57_68651.jpg?sign=1739533817-QIBIRuVa3whoXFGD1Y8DmWW85E1mckpU-0-da0bfd2f9ab10df1b9edc9cec220c222)
图3-6 链接到电子邮件
当读者单击【站长信箱】链接时,会自动弹出电子邮件客户端窗口以编写电子邮件,如图3-7所示。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P57_68652.jpg?sign=1739533817-tSV5Y5VOmkIymR9jWio5a335VCyiNqOY-0-c2a99f074cb4f9c3ffee9d5d06126adb)
图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=1739533817-1mGmya6SMmzkNhiMPdcJczV9QaXIdyXK-0-561000f2cfa04e6f4aebe9c6cd7c2bef)
在IE 11.0中预览网页效果,如图3-8所示。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P57_68712.jpg?sign=1739533817-RkIrYvHbKZ0dZQuP5ZYgLkctJJPrPchc-0-2a324ae47e66ee17d9f05247e7293af6)
图3-8 新窗口页面