第九章 在网页中创建超链接
9.1 创建超链接
超链接要能正确地进行链接跳转，需要同时存在两个端点
源端点 =》网页中提供链接单击的对象 =》如链接文本或链接图像
目标端点 =》 链接跳过去的页面或位置 =》 如某网页、书签等
目标端点使用标记的href属性来指定
源端点则通过标记的内容来指定
基本语法：
源端点
语法说明：
源端点可以是文本，也可以是图片。目标端点指定了超链接页面URL，用户单击源端点后，页面将跳转到目标端点所指页面。
9.1.2 设置超链接目标窗口
超链接页面默认情况下在当前窗口打开
设置超链接目标窗口 =》修改它的目标窗口 =》target属性
基本语法：
源端点
| 属性值 | 描述 |
|---|---|
| _blank | 在新窗口中打开链接文档 |
| _self | 在同一个框架或同一窗口中打开链接文档（默认属性） |
| _parent | 在上一级窗口中打开，一般在框架页面中经常使用 |
| _top | 在浏览器的整个窗口中打开，忽略任何框架 |
| 框架名称 | 在指定的框架窗口中打开链接文档 |
9.2 超链接的链接路径
指定自己所处的位置的标识 =》 URL
一般文件路径 =》所在的目录和文件名
链接路径就是在超链接中用于标识目标端点的位置标识
常见的链接路径主要有以下两种类型：
绝对路径 =》 文件的完整路径
相对路径 =》 相对于当前文件路径
而总体来说，相对路径包含以下3种情况
1.两文件在同一目录下
2.链接文件在当前文件的下一级目录
3.链接文件在当前文件的上一级目录
对上述相对路径的链接路径设置分别如下：
同一目录，只需输入链接文件名称
下一级目录，需在链接文件名前添加"下一级目录名/"
上一级目录，须在链接文件名前添加"…/"
9.3 超链接的类型
（1）根据目标端点的内容，可将链接分成以下类型
- 内部链接
- 外部链接
- 书签链接
- 脚本链接
- 文件下载链接
（2）按照源端点的内容，又可将链接分成以下类型
- 文本链接
- 图像链接
- 图像映射
9.3.1 内部链接
内部链接是指在同一个网站内部，不同网页之间的链接关系
基本语法：
源端点
语法说明：
通过"href"属性指定链接文件，即目标端点，“file_url”表示链接文件的路径，一般使用相对路径，“源端点”即可以是文本，也可以是图片
9.3.2 外部链接
外部链接是指跳转到当前网站外部，和其他网站中的页面或其他元素之间的链接关系
基本语法：
源端点
语法说明：
通过"href"属性指定链接文件，既目标端点。“URL”表示链接文件的路径，一般情况下，该路径需要使用绝对路径；“源端点”既可以是文本，也可以是图片
| URL格式 | 服务 | 描述 |
|---|---|---|
| http:// | www | 进入万维网 |
| mailto: | 启动邮件发送系统 | |
| ftp:// | FTP | 进入文件传输服务器 |
| telnet:// | Telnet | 启动远程登录方式 |
| news:// | News | 启动新闻讨论组 |
上述URL中，除了发送邮件的URL设置较复杂外，其他的URL的使用都比较简单，所以下面主要介绍一下发送邮件的URL
邮件链接基本语法：
源端点
语法说明：
邮址1代表收件人邮箱地址，subject属性用于设置邮件主题，cc属性用于设置抄送邮箱地址，bcc属性用于设置暗抄送邮箱地址.
注意：“?”和"&"两个符号后面都不能包含空格。
源端点既可以是文本，也可以是图片。
9.3.3 书签链接
书签链接指的是目标端点为网页中的某个书签的链接
创建书签链接涉及两个步骤：
- 创建书签
- 创建书签链接
1.创建书签
创建书签的标记与链接标记一样，都使用标记
基本语法：
[文字/图片]
语法说明：
[文字/图片]中的“[]”表示文字或图片可有可无，书签将在光标处建立一个名为“name”属性值所规定的书签。注意：书签名不能含有空格。
2.创建书签链接
基本语法：
(1) 链接到同一页面中的书签，称为内部书签链接
源端点
(2) 链接到其他页面中的书签，称为外部书签链接
源端点
语法说明：
如果书签与书签链接在同一页面，则链接路径为#号加上书签名；如果书签和书签链接分处在不同的页面，则必须在书签名及#号前加上书签所在的页面路径
9.3.4 脚本链接
脚本链接，指的是使用脚本作链接目标端点的链接，通过脚本可以实现HTML语言完成不了的功能。
基本语法：
源端点
语法说明：
在javascript:后面编写的就是具体的脚本
9.3.5 文件下载
当链接的目标文档类型属于.doc、.Rar、.cab、.zip、.exe 等时，可以获得文件下载链接.
要创建文件下载，只要在链接地址处输入文件路径即可。
基本语法：
链接内容
语法说明：
file_url指明下载文件的路径
9.3.6 文本链接
文本链接是指源端点为文本的超链接
基本语法：
文本
语法说明：file_url可以是任意的目标端点。
9.3.7 图片链接
图片链接是指源端点为图片文件的超链接
基本语法：
语法说明：
file_url指明了链接目标端点，img_url指明了图片文件路径。默认情况下，图片链接中图片会显示蓝色边框线，如果不想显示边框，应设置图片的border=“0”
注意：
在较低版本的浏览器，如IE10及以下版本的浏览器中，默认情况下，图片链接中图片会显示出大约2px宽的边框。但现在各个浏览器的最新版本中，如IE11，默认情况下图片链接中的图片不再显示边框。
如果要此时要显示边框，需要通过样式设置来实现。所以如果需要图片链接显示边框，又要兼容各个浏览器，应对图片设置边框样式。
9.3.8 图像映射
图像映射是指源端点为图片热区的超链接。一副图象被切分成不同的区域，每一个区域可以链接到不同的地址，这些区域称为图像的热区。
基本语法：
语法说明：
1.img标记中的usemap属性用于激活映射
2.标记用于定义图像映射中包含热点的映射
3.标记用于在图像映射中定义一个热区，其包含了3个必须设置的属性：shape和coords和href
4.href属性用于设置每个热区的链接路径
5.”shape“属性设置热区形状。图像映射包括3种形状的热区：矩形、圆形和多边形.coords属性设置热区坐标，热区形状决定了coords的取值，shape属性和coords属性的取值关系如下表：
| shape | coords | 描述 |
|---|---|---|
| 矩形（rect） | x1,y1,x2,y2 | (x1,y1)为矩形左上顶点坐标，（x2,y2）为矩形右下顶点的坐标，（x,y）为圆心坐标，r为半径长度 |
| 圆形 （circle） | x,y,r | (x,y) 为圆心坐标，r为半径长度 |
| 多边形（poly） | x1,y1,x2,y2,… | (x1,y1),（x2,y2) …分别为多边形的各个顶点坐标，各顶点按单击生成的先后排序 |