《轻松学HTML+CSS之链接》由会员分享，可在线阅读，更多相关《轻松学HTML+CSS之链接（45页珍藏版）》请在金锄头文库上搜索。
1、第5章 链接链接是网站构成的关键环节。链接将网站中不 同的网页文件链接在一起。用户通过链接可以 很方便找到相关的网页。网页中的内容类型多 种多样，链接的类型也不同。本章将详细讲解 有关链接的添加，样式设置等内容。5.1 认识链接链接是网页设计过程中常用的一种工具。本节 将详细介绍有关链接的作用、表现形式等基本 内容。5.1.1 链接的作用用户通过域名访问网站，默认显示网站的首 页。网站的首页通常为Index.htm。但是如果 没有链接，会出现什么情况呢？5.1.1 链接的作用但是当我们使用了链接之后，就可以访问到网 站的首页，通过首页上的其他链接，我们就可 以访问该网站中的任何一个页面了，如图
2、5.2 所示。5.1.2 表现形式在网页中，一般文字上的超链接都是蓝色，文 字下面有一条下划线。当移动鼠标指针到该超 链接上时，鼠标指针就会变成一只手的形状， 这时候用鼠标左键单击，就可以直接跳到与这 个超链接相连接的网页或WWW网站上去。5.1.3 HTML链接语法通常我们使用标签在HTNL中创建链接。 有两种使用标签的方式： 5.2 链接路径链接路径是构成链接的重要因素。它指定用户 单击链接后，跳转的位置。根据链接路径的完 整程度，链接分为绝对路径和相对路径。如果 路径的引用不正常，会造成文件链接的错误。 下面详细介绍有关链接路径。5.2.1 绝对路径HTML绝对路径（absolute p
3、ath）指带域名的 文件的完整路径。如图5.4所示。5.2.1 绝对路径绝对路径目录示例如图5.5所示：5.2.2 相对路径所谓HTML相对路径（relative path），是指 Internet上资源相对于当前页面的地址，它包 含从当前页面指向目标页面位置的路径。表现 形式：(.)表示当前目录；()表示当前目录的上 一级目录。5.2.2 相对路径相对路径目录示例如图5.6所示：1.同一个目录的文件引用如果源文件和引用文件在同一个目录里，直接 写引用文件名即可。我们现在建一个源文件info.html，在info.html里要引 用index.html文件作为超链接。假设info.html路径
4、是： c:Inetpubwwwrootsitesabcabcinfo.html假设index.html路径是： c:Inetpubwwwrootsitesabcabcindex.html2.如何表示上级目录/表示源文件所在目录的上一级目录，/表 示源文件所在目录的上上级目录，依次类推。假设info.html路径是： c:Inetpubwwwrootsitesabcabcinfo.html假设index.html路径是： c:Inetpubwwwrootsitesindex.html2.如何表示上级目录假设info.html路径是： c:Inetpubwwwrootsitesabcabcinfo
5、.html假设index.html路径是： c:Inetpubwwwrootindex.html2.如何表示上级目录假设info.html路径是： c:Inetpubwwwrootsitesabcabcinfo.html假设index.html路径是： c:Inetpubwwwrootsiteswowstoryindex.htm l3.如何表示下级目录引用下级目录的文件，直接写下级目录文件的 路径即可。假设info.html路径是： c:Inetpubwwwtootsitesabcabcinfo.html假设index.html路径是： c:Inetpubwwwrootsitesabcabch
6、tml.index.html3.如何表示下级目录假设info.html路径是： c:Inetpubwwwtootsitesabcabcinfo.html假设index.html路径是： c:Inetpubwwwtootsitesabcabchtmltutorialsin dex.html5.3 创建超级链接按照链接路径的不同，网页中超链接一般分为 以下3中类型：内部链接，锚点链接和外部链 接。如果按照使用对象的不同，网页中的链接 又可以分为：文本超链接，图像超链接， Email链接，锚点链接，多媒体文件链接，空 连接等。下面将详细讲解超级链接的创建。5.3.1 内部链接内部链接指的是网站内部页
7、面之间创建相互链 接关系。制作内部链接是用href属性，内部链 接分为以下几种用法：1.同级链接2.下级链接3.上级链接5.3.2 外部链接外部链接是指链接的目标是其他网站的网页。 这样，当前网页和目标网页就不在同一个网站 中了。5.3.3 制作目录链接目录链接是指互相链接的网页在不同的文件夹 里面。这里需要用到前面我们所讲的上级链接 和下级链接，目录链接的地址是写在href属性 里面的。5.3.4 文字超链接使用文字作为超链接的载体，可以链接其他外 部文件。语法形式:5.3.5 图像超链接图像既可以作为超链接的目标也可以作为超链 接的源。语法形式：5.3.6 热点区域的链接图片的热点区域就是
8、将一个图片分割出一个链 接区域，通过点击该区域来达到所要链接的目 标。5.3.6 热点区域的链接1.标记area标记主要用于图像地图。其基本语法结构 如下：5.3.6 热点区域的链接shape和coords的基本用法如下：5.3.6 热点区域的链接2.标记标记是在图像地图中划分作用区域的， 因此其划分的作用区域必须在图像地图的区域 内，所以在用标记划分区域前必须用 HTML的另一个标记来设定图像地图的 作用区域，并为指定的图像地图设定名称，该 标记语法很简单：5.3.7 EMAIL链接Email链接是指把指定的内容链接到邮箱里。 只要一单击链接内容，就会自动打开系统默认 的客户端软件，来进行邮
9、件的发送。这就使用 到href属性里的mailto属性值。5.3.8 空链接空链接是未指派的链接。空链接用于向页面上 的对象或文本附加的行为。设置方法很简单， 只需要在href属性中设置一个“#”即可。语法规 则：5.4 设置链接样式链接的样式多种多样，为了使链接更加的美观 ，吸引读者的注意力，下面我们介绍几种链接 样式的设置方法。5.4 设置链接样式1.链接颜色：指定应用于链接文字的颜色。一般我们通过样 式的设置来改变链接颜色等，语法如下：5.4 设置链接样式2.已访问链接：指定链接被访问过的颜色，语法规则：5.4 设置链接样式3.变换图像链接：指定当鼠标位于链接上时的颜色，语法规则：5.4
10、 设置链接样式4.活动链接：指定当鼠标在连接上点击时的颜色，语法规则 ：5.5 HTML链接-TARGET属性超链接中的target属性是用来控制链接页面用 什么方式来打开的。target属性写在标签 里面，通常要先有href属性来做链接，再出现 target属性显示打开链接的方式。target属性包 括有：打开空白页：_blank打开上一级窗口：_parent打开窗口中：_self打开整个窗口：_top5.5.1 打开空白页_BLANK_blank属性值用来控制打开的链接在新的空白 页中打开。这就有利于在打开新的链接的同时 不会影响到之前打开的网页。语法形式如下：5.5.2 打开上一级窗口_
11、PARENT_parent属性值是用在框架里面的一种链接，表 示窗体的父继承，就是（在框架中）frame或 者iframe的上一级窗口。语法规则如下： 5.5.3 打开窗口中_SELF_self属性值表示在框架里打开的链接在窗口本 身，这个属性较多的用在JavaScript中来进行 新窗口的使用，也会在框架里使用。语法规则 如下： 5.5.4 打开整个窗口_TOP_top属性值是指打开的链接会出现在最顶层的 窗体（如一个窗口中含很多的frame，iframe， 在这些元素中，top表示包含他们的母窗体， 即最开始的那个），一样是常用在JavaScript 中，也有在框架中使用的。语法规则如下：
12、5.6 HTML链接-NAME属性标签里有个name属性，它通过和href属性 合作，可以控制链接链到当前页的指定位置。 像这种在同一页面上的链接，就是锚记点。 Name属性写在标签里，中间用一个英文的 空格隔开。语法规则如下：5.6 HTML链接-NAME属性这里的href属性是用来链接带有name属性的内 容的。值得注意的是，用于锚记点链接的href 属性，在链接内容前面要多加一个#号，语法 规则如下：5.7 锚锚点链接到网页某一特定位置的超链接。 这种链接的目标端点是网页中的命名锚点，利 用这种链接，可以跳转到当前网页中的某一指 定位置上，也可以跳转到其他网页中的某一指 定位置上。5.7.1 创建图片锚链接定义语法：5.7.2 创建文字锚链接定义语法：5.8 小结本章学习了超链接的具体使用方法，通过学习 读者可以了解到超链接的语法、打开方式，使 超链接的运用更加广泛、丰富。其中，锚链接 对网页制作非常重要。
