《HTML+CSS+DIV网页设计与布局 教学课件 ppt 作者 聂斌 1_ 第3章 超链接》由会员分享，可在线阅读，更多相关《HTML+CSS+DIV网页设计与布局 教学课件 ppt 作者 聂斌 1_ 第3章 超链接（16页珍藏版）》请在金锄头文库上搜索。
1、第3章 超链接,超链接是网站中最重要的组成部分，HTML有了超链接才显得与众不同。超链接可以方便用户的使用，允许浏览者从一个网页跳转到另一个网页，多个网页因为有了超链接才会形成了一个网站。超链接不仅仅可以链接网页，还可以链接图片、视频、音频，甚至是任何一种文件。,3.1 创建超链接,在实际应用中很少有网页是单独的，通常都会使用超链接来创建一个页面与其他页面之间的联系。同样的也可以使用超链接创建与其他Web服务器上的网页联系。使用超链接不仅仅可以链接网页文件，也可以链接其他文件。,3.1.1 超链接标记,在HTML中，创建超链接的标记是。标记是双标记。以开始，以结束。标记创建的链接能指向一个HT
2、ML页面、一幅图像、一个视频文件等任何资源，其语法如下所示： 超链接文字,3.1.1 超链接标记,超链接由以下五个重要组成部分： （1）在一个超链接里，最重要的部分是目标地址。当浏览者单击该超链接时，会出现什么内容，全是由目标地址来决定的。 （2）超链接的第二个重要部分是链接文字，这个文字的作用是让浏览者看到并单击。 （3）超链接的第三个组成部分是标题。 （4）超链接的第四个组成部分是目标窗口。 （5）超链接的第五个组成部分是锚。,3.1.2 链接地址,链接地址用于设置超级链接的路径，可以使用标记中的HEAR属性来进行设置。设置超级链接地址的语法是： 用来设置超级链接的元素,3.1.2 链接地
3、址,绝对路径，实际就是完整路径。例如设置路径为“C:Program files1.htm”，在本地确实可以找到，但是到了网站上该文件不一定在这个路径下，所以就会出问题。 相对路径，顾名思义就是自己相对于目标位置的路径。一般有如下3种相对路径的写法： 同一目录下的文件：只需要输入链接文件的名称即可，如：01.html。 上一级目录中的文件，在目录名和文件名之前加入“/”，如：/04/02.html；如果是上两级，则需要加入两个“/”，如：/file/01.html。 下一级目录：输入目录名和文件名，之间以“/”隔开，如：Html/05/01.html。,3.1.3 打开链接的方式,当单击一个网页
4、里的超链接时，通常都会在当前窗口打开超链接目标页面。如果想保留当前网页的内容，让链接的页面从一个新建窗口里打开，那应该怎么办？使用元素的TARGET属性可以实现这个功能。TARGET属性用来设置打开链接的方式，其语法如下所示： 用来链接的元素 在HTML语言中，超链接的TARGET属性可以取4个值，这些值的具体含义如下表所示。,3.2 锚点,在超级链接中，有一种特殊的链接形式，称为锚点链接。如果一个网页包含的内容很多，要想在整个网页里快速查找到自己感兴趣的内容，就不会那么方便的了。这时可以通过锚点帮助用户方便地到达当前页面的其他位置。,3.2.1 创建锚点,要使用锚点引导浏览者，就要首先创建页
5、面中的锚点。创建的锚点将确定链接的目标位置。其语法是： 锚点的链接文字,3.2.2 链接到本页锚点,如果要链接到本页的命名锚上，只要在元素的HREF属性里指定锚点名称，并在该名字前加上“#”字符。锚点的名称就是3.2.1节中NAME属性的属性值。链接到本页锚点的语法如下所示： 锚点的链接文字,3.2.3 链接到其他网页的锚点,通常在单击一个超链接时，都会打开一个网页，并且默认显示该网页的顶端，而不会是网页的底部，或网页的其他位置。 如果想要打开一个网页，并且显示网页的某个区域，就必须要创建命名锚。使用元素的NAME属性可以在网页上设置链接到其他网页的锚点，其语法如下所示： 用于链接锚点的文字,
6、3.3 图像的超链接,标记不仅可以为文字设置超链接，还可以为图片设置超链接。为图片设置超链接有两种方式，一种是将整个图片设置链接，只要单击该图片，就可以跳转到链接的URL上。另一种是为图片设置热点区域，将图片划分多个区域，单击图片不同的位置将会跳转到不同的链接之上。,3.3.1 将整个图像设为链接,将整个图像设为链接的方法很简单，只需要将标记中的文字换成元素，在元素中将需要设置为超链接图片添加上即可。其语法如下所示： ,3.3.2 设置图像热点区域,除了可以为整个图像设置链接外，还可以为图像设置热点区域，也就是将一个图片划分成多个可单击的区域，单击不同的区域将跳到不同的链接上。在定义图像热点区
7、域的时候，除了要定义图像热点区域名称之外，还要设置其热区范围。可以使用IMG元素中的USEMAP属性和标签来创建，其语法是： ,3.3.2 设置图像热点区域,SHAPE属性用于指定可点击区域的形状，其值可以为： （1）CIRCLE：指定可点击区域为圆形，此时COORDS的值应该是类似于“x,y,z”的表示方法。 （2）POLYGON：指定可点击区域为多边形，此时COORDS的值应该是类似于“x1,y1,x2,y2,x3,y3”的表示方法。 （3）RECTANGLE：指定可点击区域为矩形，此时COORDS的值应该是类似于“x1,y1,x2,y2”的表示方法。,3.4 小结,本章主要介绍了HTML中超链接的使用。详细介绍了创建超链接、创建锚点和创建图像超链接的方法。其中，创建超链接包括超链接标记、链接地址和打开链接的方式；创建锚点包括创建链接到本页的锚点和链接到其他网页的锚点；创建图像超链接包括将整个图像设为链接和设置图像热点区域。,
