《HTML5+CSS3网页制作教程》课件_第5章.pptx

模块5超链接;

5.1超链接简介;

5.1.1?文本超链接

1.文本超链接概念

浏览网页时，会看到一些带下划线或不带下划线的文字，当光标移动到该文字上时，光标会变成手形，单击就会打开一个网页，这样的链接就是文本超链接。

;

2.创建文本超链接

在HTML中，超链接使用a标签来表示，它是非常常见而简单的标签。

a标签的语法如下：

ahref=链接地址超链接文字/a

说明：通过使用href属性，创建由文本指向另外一个文档的链接；href属性表示链接地址，即点击超链接之后跳转到的地址。

实现文本超链接时，把文字放到a/a标签对内部。

;

【例5-1】文本超链接。

;

上述代码在浏览器中的预览效果如图5-1所示，点击“百度一下”即可进入百度网站首页。;

5.1.2?图像超链接

1.图像超链接概念

在网页中浏览内容时，若将光标移动到图像上时，光标会变成手形，单击会打开一个网页，这样的链接就是图像超链接。

2.创建图像超链接

和实现文本超链接一样，创建图像超链接只需要把图片放到a/a标签对内部即可。;

【例5-2】图像超链接。

;

上述代码在浏览器中的预览效果如图5-2所示，点击“百度”图片即可进入百度网站首页。;

3.设置图像的热区链接

除了对整幅图像设置超链接外，还可以将图像划分为若干区域，这叫作“热区”，每个区域可设置不同的超链接。此时，包含热区的图像可以称为映射图像。

使用图像热区链接，首先需要在图像文件中设置映射图像名，在图像的属性中使用usermap标签添加图像要引用的映射图像的名称。其语法如下：

imgsrc=图像文件的路径usermap=#映射图像名称;

然后定义热区图像及热区的链接属性，其语法如下：

;

在该语法中又引入了两个标签：map和area。map和/map标签用于包含多个area标签，其中映射图像名称就是在img标签中定义的名称。area标签则用于定义各个热区和超链接，它有以下两个重要属性：

(1)shape属性：用来定义热区形状，它有四个值。

·default：默认值，为整幅图像。

·rect：矩形区域。

·circle：圆形区域。

·poly：多边形区域。

;

(2)coords属性：用来定义矩形、圆形或多边形区域的坐标。它的格式如下：

·如果shape=rect，则coords包含四个参数，分别为left、top、right和bottom，也可以将这四个参数看成矩形左上角和右下角顶点的坐标。

·如果shape=circle，则coords包含三个参数，分别为center-x、center-y和radius，即圆心坐标和圆的半径。

·如果shape=poly，则coords需要按顺序取多边形各个顶点(x、y)的坐标值，因此形式为x1,y1,x2,y2,…，xn,yn，方向可以是逆时针，也可以是顺时针，HTML会按照定义顶点的顺序将它们链接起来，形成多边形热区。;

【例5-3】平面图形热区链接。

;

;

上述代码在浏览器中的预览效果如图5-3所示。

;

5.2超链接标签

;

【例5-4】创建下载文件链接。

;

chrome浏览器中运行上述代码的效果如图5-4所示，文件下载链接和文本链接很相似，不同的是文件下载链接点击文字后会有下载进度提醒。

;

5.2.2?a标签属性

1.href属性

href属性是a标签最重要的属性。

使用a标签可以实现网页超链接，但a标签需要定义锚(anchor)来指定链接目标。锚有两种用法，介绍如下：

(1)通过href属性，创建指向另外一个文档的链接，链接对象既可以是同一网站中的资源(内部链接)，也可以是外部网站的资源(外部链接)。

(2)通过使用name或id属性，创建一个(大型)文档内部的书签(即锚点链接，将在5.3节详细讲解)。

;

2.target属性

target属性的用途是告诉浏览器希望将所链接的资源显示在哪里。默认情况下，浏览器使用的是显示当前文档的窗口(或标签页)，所以新文档将会取代正在显示的文档。

我们可以使用target属性来控制目标窗口的打开方式。

target属性的语法如下：

ahref=链接地址target=目标窗口的打开方式超链接文字/a

a标签的target属性