Web前端技术开发学习笔记(HTML标记语言篇)——第9章 在网页中创建超链接

9.1 创建超链接

创建超链接使用的标记是< a>。超链接要能进行正确的链接跳转，需要同时存在两个端点。即源端点和目标端点。
源端点是指网页中提供链接单击的对象，如链接文本或链接图像；
目标端点是指链接跳过去的页面或位置，如网页、书签等；
超链接的目标端点使用< a>标记的href属性来指定，源端点则通过< a>标记的内容来指定。

9.1.1 超链接标记

超链接< a>标记既可以用来设置超链接，也可以用来设置书签。其属性表如下：

属性	属性值	描述
href	超链接文件路径	指定链接路径(必设属性)，用于设置超链接的目标端点
name	书签名	定义书签名称
target	目标窗口名称	在指定的目标窗口中打开链接文件
title	提示文字	设置链接提示文字

使用< a>标记创建超链接的基本语法如下：

<a href=“目标端点”>源端点</a>

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

9.1.2 设置超链接窗口

超链接页面默认情况下在当前窗口打开，有时为了某种目的，希望超链接页面在其他窗口，如新开一个窗口中打开，此时我们创建超链接时就必须修改它的目标窗口。目标窗口的修改可以通过target属性来实现。

基本语法

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

语法说明：target属性可以取下表所示的5种值

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

9.2 超链接的链接路径

每个文件都有一个指定自己所处的位置的标识。对于网页来说，这个标识就是URL，而对于一般的文件则是它的路径，即所在的目录和文件名。

• 绝对路径：文件的完整路径
• 相对路径：相对于当前文件的路径

总体来说，相对路径包含以下3种情况：

1. 两个文件在同一目录下
2. 链接文件在当前文件的下一级目录
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格式如下表：

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”。

9.3.8 图像映射

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

基本语法

<img src=“img_url” use map=“#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)为矩形右下顶点的坐标
圆形circle	x，y，r	(x，y)为圆心坐标，r为半径长度
多边形poly	x1，y1，x2，y2，…	(x1,y1)(x2,y2)…分别为多边形的各个顶点坐标，各顶点按单击生成的先后排序