![HTML5+CSS3+JavaScript 从入门到项目实践(超值版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/418/31794418/b_31794418.jpg)
7.3 定义超链接和热点区域
超链接是网页设计中比较重要的一步,通过它,可以创建网页与网页之间的关系,本节将介绍超链接的有关知识。
7.3.1 定义超链接
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P120_23676.jpg?sign=1739188725-7ghYglWbq14ff3146klvf6AxAHu9ZkuW-0-e9b93eb654fe5d5ff98a6a4e428ac98c)
超链接标签是<a href=”#”></a>,在超链接中可以设置文字、图片等。href属性设置的是该链接所要链接的网址或者文件路径,代码如下:
<a href="http://www.baidu.com"> <a href="index.html">
7.3.2 链接的目标窗口
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P120_23677.jpg?sign=1739188725-cqw8zzrZscfsHmD4k2PhRMJ9NiXnOYju-0-d0ad90332815a2042c3e7222da54afef)
默认情况下,当单击超链接时,目标页面会在当前窗口中显示,替换当前页面的内容。如果要在单击某个链接以后,打开一个新的浏览器窗口,在这个新窗口中显示目标页面,就需要使用<a>标签的target属性。
target属性有4个属性值,分别为_blank、_self、_top和_parent。由于HTML 5不支持框架,所以_top和_parent这两个取值不常用。本节介绍_blank和_self这两个属性值。_blank定义在新窗口中显示超链接页面,_self定义在自身窗口中显示超链接页面。
【例7-1】(实例文件:ch07\Chap7.1.html)_blank属性值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="index.html" target="_blank">新窗口中打开</a> <!--创建超链接,定义在新窗口中显示超链接页面--> </body> </html>
新窗口index.html文件:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>新窗口</title> </head> <body> 我是超链接的内容 </body> </html>
相关的代码实例请参考Chap7.1.html文件,在IE浏览器中运行的结果如图7-1所示。单击超链接时,在新窗口中打开目标页面,如图7-2所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P121_23684.jpg?sign=1739188725-42NI5tNM1EFXRlD5yFCgqxwwGmOqmB6i-0-5e09c1bd0104f758d030f7b4ee87598c)
图7-1 页面加载完效果
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P121_23691.jpg?sign=1739188725-3z1sANuxd7G5dmlO86FO7MtbX0E3AzpZ-0-6d756a050a85cea9e9a09eb17750eb86)
图7-2 超链接到目标页面
7.3.3 定义不同目标的超链接
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P121_23784.jpg?sign=1739188725-1i5L5Q5Vv1AOUPUJIVUwPO7ypfYUOh2Z-0-76cad2965edfd2e29afd12651018a086)
超链接除了可以指向.html文件外,还可以指向其他类型的文件,如图片文件、声音文件、视频文件、word、FTP服务器、其他文件、电子邮件等。
【例7-2】(实例文件:ch07\Chap7.2.html)定义不同目标的链接。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P121_119891.jpg?sign=1739188725-MsjadbAUK89mBYp3yK330VStQAwxWehs-0-197b73dbc0e1c580fde922257c60e8b0)
相关的代码实例请参考Chap7.2.html文件,在IE浏览器中运行的结果如图7-3所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P121_23774.jpg?sign=1739188725-KHmatsH74xswNZUaubszee5JPTUHjUbP-0-77d822a5603a757c3b2d2833c0bd2d51)
图7-3 定义不同目标的超链接
7.3.4 定义热点区域
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P121_23785.jpg?sign=1739188725-23nAwbfKY0WRfpApE4OEzyeqoKMMmG0e-0-aa96988934a8aa6f9465b51152264be8)
有时为了满足不同的需要,一张图片上会有好几个超链接,这就是图片的热点区域。热点区域其实就是将一张图片分成许多份,当浏览者访问点击不同的区域后,会超链接到不同的目标页面。在HTML 5中可以为图片创建3种类型的热点区域:矩形、圆形和多边形。
创建热点区域使用<map>标签和<area>来实现。<map>标签只有一个name属性,其作用是为区域命名,其值必须与<img>标签的usemap属性值相同。<area>标签有3个属性值,分别为shape、coords和href。
【例7-3】(实例文件:ch07\Chap7.3.html)定义热点区域。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P122_119892.jpg?sign=1739188725-us7lK6kUY5GPar0IguBZ0xRkCuqkBO3e-0-1ae9ba40c6c21f7c89d299d1b3dbd557)
相关的代码实例请参考Chap7.3.html文件,在IE浏览器中运行的结果如图7-4所示。当单击图片上矩形热点区域时,将超链接到目标页面,如图7-5所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P122_23890.jpg?sign=1739188725-IeCqE4P2WAXqcdfQDa8VFJoCG26c214m-0-59b1da2033daf3345f3991306e926ea8)
图7-4 页面加载完效果
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P122_23897.jpg?sign=1739188725-Wqo3eh4R1vmNf5EEsdya1YhvwE7MAhYD-0-78576568f8a4a9a4ef3fb59b708f306f)
图7-5 新页面效果