轻松学HTML+CSS之链接

1、第5章 链接链接是网站构成的关键环节。链接将网站中不同的网页文件链接在一起。用户通过链接可以很方便找到相关的网页。网页中的内容类型多种多样，链接的类型也不同。本章将详细讲解有关链接的添加，样式设置等内容。15.1 认识链接链接是网页设计过程中常用的一种工具。本节将详细介绍有关链接的作用、表现形式等基本内容。25.1.1 链接的作用用户通过域名访问网站，默认显示网站的首页。网站的首页通常为Index.htm。但是如果没有链接，会出现什么情况呢？35.1.1 链接的作用但是当我们使用了链接之后，就可以访问到网站的首页，通过首页上的其他链接，我们就可以访问该网站中的任何一个页面了，如图5.2所示。4

2、5.1.2 表现形式在网页中，一般文字上的超链接都是蓝色，文字下面有一条下划线。当移动鼠标指针到该超链接上时，鼠标指针就会变成一只手的形状，这时候用鼠标左键单击，就可以直接跳到与这个超链接相连接的网页或WWW网站上去。55.1.3 HTML链接语法通常我们使用标签在HTNL中创建链接。有两种使用标签的方式： 65.2 链接路径链接路径是构成链接的重要因素。它指定用户单击链接后，跳转的位置。根据链接路径的完整程度，链接分为绝对路径和相对路径。如果路径的引用不正常，会造成文件链接的错误。下面详细介绍有关链接路径。75.2.1 绝对路径HTML绝对路径（absolute path）指带域名的文件的完

3、整路径。如图5.4所示。85.2.1 绝对路径绝对路径目录示例如图5.5所示：95.2.2 相对路径所谓HTML相对路径（relative path），是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目标页面位置的路径。表现形式：(.)表示当前目录；(.)表示当前目录的上一级目录。105.2.2 相对路径相对路径目录示例如图5.6所示：111.同一个目录的文件引用如果源文件和引用文件在同一个目录里，直接写引用文件名即可。我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。假设info.html路径是：c:Inetpubsi

4、tesabcabcinfo.html假设index.html路径是：c:Inetpubsitesabcabcindex.html122.如何表示上级目录./表示源文件所在目录的上一级目录，././表示源文件所在目录的上上级目录，依次类推。假设info.html路径是：c:Inetpubsitesabcabcinfo.html假设index.html路径是：c:Inetpubsitesindex.html132.如何表示上级目录假设info.html路径是：c:Inetpubsitesabcabcinfo.html假设index.html路径是：c:Inetpubindex.html142.如何

5、表示上级目录假设info.html路径是：c:Inetpubsitesabcabcinfo.html假设index.html路径是：c:Inetpubsiteswowstoryindex.html153.如何表示下级目录引用下级目录的文件，直接写下级目录文件的路径即可。假设info.html路径是：c:Inetpubsitesabcabcinfo.html假设index.html路径是：c:Inetpubsitesabcabchtml.index.html163.如何表示下级目录假设info.html路径是：c:Inetpubsitesabcabcinfo.html假设index.html路径

6、是：c:Inetpubsitesabcabchtmltutorialsindex.html175.3 创建超级链接按照链接路径的不同，网页中超链接一般分为以下3中类型：内部链接，锚点链接和外部链接。如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，Email链接，锚点链接，多媒体文件链接，空连接等。下面将详细讲解超级链接的创建。185.3.1 内部链接内部链接指的是网站内部页面之间创建相互链接关系。制作内部链接是用href属性，内部链接分为以下几种用法：1.同级链接2.下级链接3.上级链接195.3.2 外部链接外部链接是指链接的目标是其他网站的网页。这样，当前网页和目标

7、网页就不在同一个网站中了。205.3.3 制作目录链接目录链接是指互相链接的网页在不同的文件夹里面。这里需要用到前面我们所讲的上级链接和下级链接，目录链接的地址是写在href属性里面的。215.3.4 文字超链接使用文字作为超链接的载体，可以链接其他外部文件。语法形式:225.3.5 图像超链接图像既可以作为超链接的目标也可以作为超链接的源。语法形式：235.3.6 热点区域的链接图片的热点区域就是将一个图片分割出一个链接区域，通过点击该区域来达到所要链接的目标。245.3.6 热点区域的链接1.标记area标记主要用于图像地图。其基本语法结构如下：255.3.6 热点区域的链接shape和c

8、oords的基本用法如下：265.3.6 热点区域的链接2.标记标记是在图像地图中划分作用区域的，因此其划分的作用区域必须在图像地图的区域内，所以在用标记划分区域前必须用HTML的另一个标记来设定图像地图的作用区域，并为指定的图像地图设定名称，该标记语法很简单：275.3.7 Email链接Email链接是指把指定的内容链接到邮箱里。只要一单击链接内容，就会自动打开系统默认的客户端软件，来进行邮件的发送。这就使用到href属性里的mailto属性值。285.3.8 空链接空链接是未指派的链接。空链接用于向页面上的对象或文本附加的行为。设置方法很简单，只需要在href属性中设置一个“#”即可。语

9、法规则：295.4 设置链接样式链接的样式多种多样，为了使链接更加的美观，吸引读者的注意力，下面我们介绍几种链接样式的设置方法。305.4 设置链接样式1.链接颜色：指定应用于链接文字的颜色。一般我们通过样式的设置来改变链接颜色等，语法如下：315.4 设置链接样式2.已访问链接：指定链接被访问过的颜色，语法规则：325.4 设置链接样式3.变换图像链接：指定当鼠标位于链接上时的颜色，语法规则：335.4 设置链接样式4.活动链接：指定当鼠标在连接上点击时的颜色，语法规则：345.5 HTML链接-target属性超链接中的target属性是用来控制链接页面用什么方式来打开的。target属性

10、写在标签里面，通常要先有href属性来做链接，再出现target属性显示打开链接的方式。target属性包括有：打开空白页：_blank打开上一级窗口：_parent打开窗口中：_self打开整个窗口：_top355.5.1 打开空白页_blank_blank属性值用来控制打开的链接在新的空白页中打开。这就有利于在打开新的链接的同时不会影响到之前打开的网页。语法形式如下：365.5.2 打开上一级窗口_parent_parent属性值是用在框架里面的一种链接，表示窗体的父继承，就是（在框架中）frame或者iframe的上一级窗口。语法规则如下： 375.5.3 打开窗口中_self_self

11、属性值表示在框架里打开的链接在窗口本身，这个属性较多的用在JavaScript中来进行新窗口的使用，也会在框架里使用。语法规则如下： 385.5.4 打开整个窗口_top_top属性值是指打开的链接会出现在最顶层的窗体（如一个窗口中含很多的frame，iframe，在这些元素中，top表示包含他们的母窗体，即最开始的那个），一样是常用在JavaScript中，也有在框架中使用的。语法规则如下：395.6 HTML链接-name属性标签里有个name属性，它通过和href属性合作，可以控制链接链到当前页的指定位置。像这种在同一页面上的链接，就是锚记点。Name属性写在标签里，中间用一个英文的空格隔开。语法规则如下：405.6 HTML链接-name属性这里的href属性是用来链接带有name属性的内容的。值得注意的是，用于锚记点链接的href属性，在链接内容前面要多加一个#号，语法规则如下：415.7 锚锚点链接到网页某一特定位置的超链接。这种链接的