5.2 定义超链接
在网页中定义超链接需要两个基本要素：设置为超链接的网页对象，为超链接指向的目标地址URL。
5.2.1 超链接分类
1．根据链接目标
如果根据URL不同，网页中的超链接一般可以分为3种类型：
内部链接。
锚点链接。
外部链接。
内部链接所链接的目标一般位于同一个网站中，对于内部链接来说，可以使用相对路径和绝对路径。所谓相对路径就是URL中没有指定超链接的协议和互联网位置，仅指定相对位置关系。
例如，如果a.html和b.html位于同一目录下，则直接指定文件（b.html）即可，因为它们的相对位置关系是平等的。如果b.html位于本目录的下一级目录（sub）中，则可以使用“sub/b.html”相对路径即可。如果b.html位于上一级目录（father）中，则可以使用“../ b.html”相对路径即可，其中“..”符号表示父级目录。还可以使用“/”来定义站点根目录，如“/ b.html”就表示链接到站点根目录下的b.html文件。
外部链接所链接的目标一般为外部网站目标，当然也可以是网站内部目标。外部链接一般要指定链接所使用的协议和网站地址，例如，http://www.mysite.cn/web2_nav/index.html，其中http是传输协议，www.mysite.cn表示网站地址，后面跟随字符是站点相对地址。
锚点链接是一种特殊的链接方式，实际上它是在内部链接或外部链接基础上增加锚标记后缀（#标记名），例如，http://www.mysite.cn/web2_nav/index.html#anchor，就表示跳转到index.htm页面中标记为anchor的锚点位置。
2．根据链接对象
如果根据超链接包裹的对象的不同，网页中的链接又可以分为文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等。
【补充】
URL（Uniform Resource Locator，统一资源定位器）主要用于指定网上资源的位置和方式。一个URL一般由下列3部分组成。
第1部分：协议（或服务方式）。
第2部分：存有该资源的主机IP地址（有时也包括端口号）。
第3部分：主机资源的具体地址，如目录和文件名等。
例如，protocol://machinename[:port]/directory/filename，其中protocol是访问该资源所采用的协议，即访问该资源的方法，简单说明如下：
http://：超文本传输协议，表示该资源是HTML文件。
ftp://：文件传输协议，表示用FTP传输方式访问该资源。
mailto:：表示该资源是电子邮件（不需要两条斜杠）。
file://：表示本地文件。
machinename表示存放该资源的主机的IP地址，通常以字符形式出现，如www.china.com.port。其中port是服务器在该主机所使用的端口号，一般情况下不需要指定，只有当服务器所使用的不是默认的端口号时才指定。directory和filename是该资源的路径和文件名。
5.2.2 使用<a>标签
视频讲解
HTML5使用<a>标签定义超链接，设计从一个页面链接到另一个页面。<a>最重要的属性是href属性，它指示链接的目标。用法如下：
<a href="#">链接文本</a>
【示例1】下面代码定义一个超链接文本，单击该文本将跳转到百度首页。
<a href="https://www.baidu.com/">百度一下</a>
<a>标签包含众多属性，其中被HTML5支持的属性如表5.4所示。
表5.4 <a>标签属性
提示：如果不使用href属性，则不可以使用如下属性：download、hreflang、media、rel、target以及type属性。
在默认状态下，被链接页面会显示在当前浏览器窗口中，可以使用target属性改变页面显示的窗口。
【示例2】下面代码定义一个超链接文本，当单击该文本时将在新的标签页中显示百度首页。
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
提示：在HTML4中，<a>标签可以定义超链接，或者定义锚点。但是在HTML5中，<a>标签只能定义超链接，如果未设置href属性，则只是超链接的占位符，而不再是一个锚点。
用来定义超链接的对象，可以是一段文本，或者是一个图片，甚至是页面任何对象。当浏览者单击已经链接的文字或图片后，被链接的目标将显示在浏览器上，并且根据目标的类型来打开或运行。
【示例3】下面示例为图像绑定一个超链接，这样当用户单击图像时，会跳转到指定的网址，效果如图5.13所示。
<a href="https://www.baidu.com/" target="_blank">
<img src="images/logo.png" width="300" />
</a>
图5.13 为图像定义超链接效果
5.2.3 定义锚点链接
视频讲解
锚点链接是指定向同一页面或者其他页面中的特定位置的链接。例如，在一个很长的页面，在页面的底部设置一个锚点，单击后可以跳转到页面顶部，这样避免了上下滚动的麻烦。
例如，在页面内容的标题上设置锚点，然后在页面顶部设置锚点的链接，这样就可以通过链接快速地浏览具体内容。
创建锚点链接的步骤如下：
第1步，创建用于链接的锚点。任何被定义了ID值的元素都可以作为锚点标记，就可以定义指向该位置点的锚点链接了。注意，给页面标签的ID锚点命名时不要含有空格，同时不要置于绝对定位元素内。
第2步，在当前页面或者其他页面不同位置定义超链接，为<a>标签设置href属性，属性值为“#+锚点名称”，如输入“#p4”。如果链接到不同的页面，如test.html，则输入“test.html#p4”，可以使用绝对路径，也可以使用相对路径。注意，锚点名称是区分大小写的。
【示例】下面示例定义一个锚链接，链接到同一个页面的不同位置，效果如图5.14所示。当单击网页顶部的文本链接后，会跳转到页面底部的图片4所在的位置。
<!doctype html>
<body>
<p><a href="#p4">查看图片4</a> </p>
<h2>图片1</h2>
<p><img src="images/1.jpg" /></p>
<h2>图片2</h2>
<p><img src="images/2.jpg" /></p>
<h2>图片3</h2>
<p><img src="images/3.jpg" /></p>
<h2 id="p4">图片4</h2>
<p><img src="images/4.jpg" /></p>
<h2>图片5</h2>
<p><img src="images/5.jpg" /></p>
<h2>图片6</h2>
<p><img src="images/6.jpg" /></p>
</body>
图5.14 定义锚链接
5.2.4 定义目标链接
视频讲解
超链接指向的目标对象可以是不同的网页，也可以是相同网页内的不同位置，还可以是一张图片、一个电子邮件地址、一个文件、FTP服务器，甚至是一个应用程序，也可以是一段JavaScript脚本。
【示例1】<a>标签的href属性指向链接的目标可以是各种类型的文件。如果是浏览器能够识别的类型，会直接在浏览器中显示；如果是浏览器不能识别的类型，会弹出“文件下载”对话框，允许用户下载到本地，演示效果如图5.15所示。
<p><a href="images/1.jpg">链接到图片</a> </p>
<p><a href="demo.html">链接到网页</a> </p>
<p><a href="demo.docx">链接到Word文档</a> </p>
图5.15 下载Word文档
定义超链接地址为邮箱地址即为E-mail链接。通过E-mail链接可以为用户提供方便的反馈与交流机会。当浏览者单击邮件链接时，会自动打开客户端浏览器默认的电子邮件处理程序（如Outlook Express），收件人邮件地址被电子邮件链接中指定的地址自动更新，浏览者不用手工输入。
创建E-mail链接方法：为<a>标签设置href属性，属性值为“mailto:+电子邮件地址＋?＋subject=+邮件主题”，其中subject表示邮件主题，为可选项目，例如，mailto:namee@mysite.cn?subject=意见和建议。
【示例2】下面示例使用<a>标签创建电子邮件链接。
<a href="mailto:namee@mysite.cn">namee@mysite.cn</a>
注意：如果为href属性设置“#”，则表示一个空链接，单击空链接，页面不会发生变化。
5.2.5 定义下载链接
视频讲解
当被链接的文件不被浏览器解析时，如二进制文件、压缩文件等，便被浏览器直接下载到本地计算机中，这种链接形式就是下载链接。
对于能够被浏览器解析的目标对象，用户可以使用HTML5新增属性download强制浏览器执行下载操作。
【示例】下面示例比较了超链接使用download和不使用download的区别。
<p><a href="images/1.jpg" download >下载图片</a></p>
<p><a href="images/1.jpg" >浏览图片</a></p>
提示：目前，只有Firefox和Chrome浏览器支持download属性。
5.2.6 定义图像热点
图像热点就是为图像的局部区域定义超链接，当单击该热点区域时会触发超链接，并跳转到其他网页或网页的某个位置。
图像热点是一种特殊的超链接形式，常用来在图像中设置导航。在一幅图上定义多个热点区域，以实现单击不同的热区链接到不同页面。
定义图像热点，需要<map>和<area>标签配合使用。具体说明如下：
<map>：定义热点区域。包含必需的id属性，定义热点区域的ID，或者定义可选的name属性，也可以作为一个句柄，与热点图像进行绑定。
<img>中的usemap属性可引用<map>中的id或name属性（根据浏览器），所以应同时向<map>添加id和name属性，且设置相同的值。
<area>：定义图像映射中的区域，area元素必须嵌套在<map>标签中。该标签包含一个必须设置的属性alt，定义热点区域的替换文本。该标签还包含多个可选属性，说明如表5.5所示。
表5.5 <area>标签属性
【示例】下面示例具体演示了如何为一幅图片定义多个热点区域，演示效果如图5.16所示。
提示：定义图像热点，建议用户借助Dreamweaver可视化设计视图快速实现，因为设置坐标是一件费力不讨好的烦琐工作，可视化操作如图5.17所示。
图5.16 定义热点区域
图5.17 借助Dreamweaver快速定义热点区域
5.2.7 定义框架链接
视频讲解
HTML5已经不支持frameset框架，但是它仍然支持iframe浮动框架的使用。浮动框架可以自由控制窗口大小，可以配合网页布局在任何位置插入窗口，实际上就是在窗口中再创建一个窗口。
使用iframe创建浮动框架的用法如下：
<iframe src="URL">
src表示浮动框架中显示网页的路径，可以是绝对路径，也可以是相对路径。
【示例】下面示例是在浮动框架中链接到百度首页，显示效果如图5.18所示。
<iframe src="http://www.baidu.com"></iframe>
图5.18 使用浮动框架
从图5.18可以看到，浮动框架在页面中又创建了一个窗口。在默认情况下，浮动框架的宽度和高度为220×120。如果需要调整浮动框架的尺寸，应该使用CSS样式。
<iframe>标签包含多个属性，其中被HTML5支持或新增的属性如表5.6所示。
表5.6 <iframe>标签属性
