第九章 在网页中创建超链接

9.1 创建超链接

创建超链接使用的标记是<a>

超链接要能正确地进行链接跳转，需要同时存在两个端点

源端点 =》网页中提供链接单击的对象 =》如链接文本或链接图像

目标端点 =》 链接跳过去的页面或位置 =》 如某网页、书签等

目标端点使用<a>标记的href属性来指定
源端点则通过<a>标记的内容来指定

基本语法：

<a href="目标端点">源端点</a>

语法说明：
源端点可以是文本，也可以是图片。目标端点指定了超链接页面URL，用户单击源端点后，页面将跳转到目标端点所指页面。

9.1.2 设置超链接目标窗口

超链接页面默认情况下在当前窗口打开

设置超链接目标窗口 =》修改它的目标窗口 =》target属性

基本语法：

<a href="目标端点" target="目标窗口名称">源端点</a>

属性值	描述
_blank	在新窗口中打开链接文档
_self	在同一个框架或同一窗口中打开链接文档（默认属性）
_parent	在上一级窗口中打开，一般在框架页面中经常使用
_top	在浏览器的整个窗口中打开，忽略任何框架
框架名称	在指定的框架窗口中打开链接文档

9.2 超链接的链接路径

指定自己所处的位置的标识 =》 URL

一般文件路径 =》所在的目录和文件名

链接路径就是在超链接中用于标识目标端点的位置标识

常见的链接路径主要有以下两种类型：

绝对路径 =》 文件的完整路径
相对路径 =》 相对于当前文件路径

而总体来说，相对路径包含以下3种情况
1.两文件在同一目录下
2.链接文件在当前文件的下一级目录
3.链接文件在当前文件的上一级目录

对上述相对路径的链接路径设置分别如下：
同一目录，只需输入链接文件名称
下一级目录，需在链接文件名前添加"下一级目录名/"
上一级目录，须在链接文件名前添加"…/"

9.3 超链接的类型

（1）根据目标端点的内容，可将链接分成以下类型

• 内部链接
• 外部链接
• 书签链接
• 脚本链接
• 文件下载链接

（2）按照源端点的内容，又可将链接分成以下类型

• 文本链接
• 图像链接
• 图像映射

9.3.1 内部链接

内部链接是指在同一个网站内部，不同网页之间的链接关系
基本语法：

<a href="file_url">源端点</a>

语法说明：
通过"href"属性指定链接文件，即目标端点，“file_url”表示链接文件的路径，一般使用相对路径，“源端点”即可以是文本，也可以是图片

9.3.2 外部链接

外部链接是指跳转到当前网站外部，和其他网站中的页面或其他元素之间的链接关系
基本语法：

<a href="URL">源端点</a>

语法说明：
通过"href"属性指定链接文件，既目标端点。“URL”表示链接文件的路径，一般情况下，该路径需要使用绝对路径；“源端点”既可以是文本，也可以是图片

URL格式	服务	描述
http://	www	进入万维网
mailto:	E-mail	启动邮件发送系统
ftp://	FTP	进入文件传输服务器
telnet://	Telnet	启动远程登录方式
news://	News	启动新闻讨论组

上述URL中，除了发送邮件的URL设置较复杂外，其他的URL的使用都比较简单，所以下面主要介绍一下发送邮件的URL
邮件链接基本语法：

<a href="mailto:邮址1?subject=content&cc=邮址2&bcc=邮址3">源端点</a>

语法说明：
邮址1代表收件人邮箱地址，subject属性用于设置邮件主题，cc属性用于设置抄送邮箱地址，bcc属性用于设置暗抄送邮箱地址.
注意：“?”和"&"两个符号后面都不能包含空格。
源端点既可以是文本，也可以是图片。

9.3.3 书签链接

书签链接指的是目标端点为网页中的某个书签的链接
创建书签链接涉及两个步骤：

• 创建书签
• 创建书签链接

1.创建书签
创建书签的标记与链接标记一样，都使用<a>标记
基本语法：

<a name="书签名">[文字/图片]</a>

语法说明：
[文字/图片]中的“[]”表示文字或图片可有可无，书签将在光标处建立一个名为“name”属性值所规定的书签。注意：书签名不能含有空格。

2.创建书签链接
基本语法：
(1) 链接到同一页面中的书签，称为内部书签链接

<a href="#书签名">源端点</a>

(2) 链接到其他页面中的书签，称为外部书签链接

<a href="file_url#书签名">源端点</a>

语法说明：
如果书签与书签链接在同一页面，则链接路径为#号加上书签名；如果书签和书签链接分处在不同的页面，则必须在书签名及#号前加上书签所在的页面路径

9.3.4 脚本链接

脚本链接，指的是使用脚本作链接目标端点的链接，通过脚本可以实现HTML语言完成不了的功能。
基本语法：

<a href="javascript:..">源端点</a>

语法说明：
在javascript:后面编写的就是具体的脚本

9.3.5 文件下载

当链接的目标文档类型属于.doc、.Rar、.cab、.zip、.exe 等时，可以获得文件下载链接.
要创建文件下载，只要在链接地址处输入文件路径即可。
基本语法：

<a href="file_url">链接内容</a>

语法说明：
file_url指明下载文件的路径

9.3.6 文本链接

文本链接是指源端点为文本的超链接
基本语法：

<a href="file_url">文本</a>

语法说明：file_url可以是任意的目标端点。

9.3.7 图片链接

图片链接是指源端点为图片文件的超链接
基本语法：

<a href="file_url"><img src="img_url" ...></a>

语法说明：
file_url指明了链接目标端点，img_url指明了图片文件路径。默认情况下，图片链接中图片会显示蓝色边框线，如果不想显示边框，应设置图片的border=“0”
注意：
在较低版本的浏览器，如IE10及以下版本的浏览器中，默认情况下，图片链接中图片会显示出大约2px宽的边框。但现在各个浏览器的最新版本中，如IE11，默认情况下图片链接中的图片不再显示边框。
如果要此时要显示边框，需要通过样式设置来实现。所以如果需要图片链接显示边框，又要兼容各个浏览器，应对图片设置边框样式。

9.3.8 图像映射

图像映射是指源端点为图片热区的超链接。一副图象被切分成不同的区域，每一个区域可以链接到不同的地址，这些区域称为图像的热区。
基本语法：

<img src="img_url" usemap="#map_name“>
	<map name="map_name">
	<area shape="rect" coords="x1,.y1,x2,y2" href="链接地址1">
	<area shape="circle" coords="x,y,r" href="链接地址2">
	<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="链接地址3">
	</map>

语法说明：
1.img标记中的usemap属性用于激活映射
2.<map>标记用于定义图像映射中包含热点的映射
3.<area>标记用于在图像映射中定义一个热区，其包含了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) …分别为多边形的各个顶点坐标，各顶点按单击生成的先后排序