轻松学HTMLCSS之链接.pptx

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