中国最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2

Dreamweaver教程

认识超链接

阅读 (1893)

核心提示:介绍什么是超链接、什么是内部链接、外部链接与脚本链接、什么是绝对路径与相对路径。

   一、什么是超链接

       所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。而在一个网页中用来超链接的对象,可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。

  类型    

  按照链接路径的不同,网页中超链接一般分为以下3种类型: 内部链接,锚点链接和外部链接。

  超链接对象    

  超链接是超级链接的简称。如果按照使用对象的不同,网页中的链接又可以分为:文本超链接,图像超链接,E-mail链接,锚点链接,多媒体文件链接,空链接等。

  超链接是一种对象,它以特殊编码的文本或图形的形式来实现链接,如果单击该链接,则相当于指示浏览器移至同一网页内的某个位置,或打开一个新的网页,或打开某一个新的WWW网站中的网页。

  网页超链接    

  网页上的超链接一般分为三种:一种是绝对URL的超链接。URL(Uniform Resource Locator)就是统一资源定位符,简单地讲就是网络上的一个站点、网页的完整路径。http://www.xxx. com/

  第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去;

  还有一种称为同一网页的超链接,这种超链接又叫做书签。

  动态静态    

  超链接还可以分为动态超链接和静态超链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的超链接,例如我们可以实现将鼠标移动到某 个文字链接上,文字就会象动画一样动起来或改变颜色的效果,也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态超链接,顾名思义,就是没有 动态效果的超链接。

  颜色    

  在网页中,一般文字上的超链接都是蓝色(当然,用户也可以自己设置成其他颜色),文字下面有一条下划线。当移动鼠标指针到该超链接上时,鼠标指 针就会变成一只手的形状,这时候用鼠标左键单击,就可以直接跳到与这个超链接相连接的网页或WWW网站上去。如果用户已经浏览过某个超链接,这个超链接的 文本颜色就会发生改变(默认为紫色)。只有图像的超链接访问后颜色不会发生变化。

   二、内部链接、外部链接与脚本链接

     外部链接,又常被称为:“反向链接”或“导入链接”,是指其他网站链接到你的网站的链接。

  外部链接指的是针对搜索引擎,与其它站点所做的友情链接。高质量的外部链接指:和你的网站建立链接的网站知名度高,访问量大,同时相对的外部链

  作用

  外部链接主要有两个作用。一个作用是面向用户,用户可以通过A网站的链接点击到B网站从而带来访问者,另一个作用是外部链接可以分享到一部分权 重,A网站链接到B网站代表A网站告诉搜索引擎它信任B网站,觉得B网站是一个不错的网站从而给B网站投了一票,这样B网站就可以从A网站分享到一定权 重,并在搜索引擎那的权重得到提高。

  接较少,有助于快速提升你的网站知名度和排名的其他网站的友情链接。

  内部链接

  与外部链接(即反向链接)相反,内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接,乃至站内关键词之间 的Tag链接都可以归类为内部链接,因此内部链接我们也可以称之为站内链接,对内部链接的优化其实就是对网站的站内链接的优化。

  内部链接的作用

  我们都知道外部链接可以提高网站权重,进而促使排名靠前,那么内部链接又有什么作用呢?反向链接的重要性,很多SEO项目其实到了后期就是外部 链接的交换与维护,由此也可见外部链接对网站排名的重要性。但是很多SEO将外部链接当成网站优化的全部,这其实是非常错误的,因为合理地安排内部链接, 尤其是大型网站,合理的内部链接部署策略同样可以极大地提升网站的SEO效果。作为SEO,我们不应该忽略站内链接所起的巨大作用。

  内部链接的优点

  内部链接容易控制,成本低。你直接就可以在自己的站上进行部署,不像外部链接的不可控性比较大,需要大量的购买或长期的积累才有办法实现稳定的SEO效果。

  脚本链接

  执行 JavaScript 代码或调用 JavaScript 函数。它非常有用,能够在不离开当前 Web 页面的情况下为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时,执行计算、验证表单和完成其它处理任务。

   三、绝对路径与相对路径

       在HTML里只要涉及文件的地方(如超级链接、图片等)就会涉及绝对路径与相对路径的概念。

  1.绝对路径

  绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book网页布局代码第2章”目录下,那么 “bg.jpg”这个图片的绝对路径就是“E:\book网页布代码第2章\bg.jpg"。那么如果要使用绝对路径指定网页的背景图片就应该使用以下语 句:

  2.使用绝对路径的缺点

  事实上,在网页编程时,很少会使用绝对路径,如果使用“E:\book网页布代码第2章\bg.jpg”来指定背景图片的位置,在自己的计算机 上浏览可能会一切正常,但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时,可能整个网站并没有放在Web服务器的E 盘,有可能是D盘或H盘。即使放在Web服务器的E盘里,Web服务器的E盘里也不一定会存在“E:\book网页布局代码第2章”这个目录,因此在浏览 网页时是不会显示图片的。

  3.相对路径

  为了避免这种隋况发生,通常在网页里指定文件时,都会选择使用相对路径。所谓相对路径,就是相对于自己的目标文件位置。例如上面的例 子,“s1.htm”文件里引用了“bg.jpg”图片,由于“bg.jpg”图片相对于“s1.htm”来说,是在同一个目录的,那么要在 “s1.htm”文件里使用以下代码后,只要这两个文件的相对位置没有变(也就是说还是在同一个目录内),那么无论上传到Web服务器的哪个位置,在浏览 器里都能正确地显示图片。

  再举一个例子,假设“s1.htm”文件所在目录为“E:\book网页布局代码第2章”,而“bg.jpg”图片所在目录为“E:\book 网页布局代码第2章img”,那么“bg.jpg”图片相对于“s1.htm”文件来说,是在其所在目录的“img”子目录里,则引用图片的语句应该为:

  注意:相对路径使用“/”字符作为目录的分隔字符,而绝对路径可以使用“”或“/”字符作为目录的分隔字符。由于“img”目录是“第2章”目录下的子目录,因此在“img”前不用再加上“/”字符。

  在相对路径里常使用“../”来表示上一级目录。如果有多个上一级目录,可以使用多个“../”,例如“../../”代表上上级目录。假设 “s1.htm”文件所在目录为“E:\book网页布局代码第2章”,而“bg.jpg”图片所在目录为“E:\book网页布局代码”,那么 “bg.jpg”图片相对于“s1.htm”文件来说,是在其所在目录的上级目录里,则引用图片的语句应该为:

  再举一个例子,假设“s1.htm”文件所在目录为“E:\book网页布局代码第2章”,而“bg.jpg”图片所在目录为“E:\book 网页布局代码img”,那么“bg.jpg”图片相对于“s1.htm”文件来说,是在其所在目录的上级目录里的“img”子目录里,则引用图片的语句应 该为:

  4.相对虚拟目录

  有关相对路径还有一个比较特殊的表示:“相对虚拟目录”。请看下面的例子:

  在这个例子里,background属性的值为“/img/bg.jpg”,注意在“img”前有一个“/”字符。这个“/”代表的是虚拟目录 的根目录.假设把“E:\book网页布局代码”设为虚拟目录,那么“/img/bg.jpg”的真实路径为“E:\book网页布局代码 img/bg.jpg”;如果把“E:\book网页布局代码第2章”设为虚拟目录,那么“/img/bg.jpg”的真实路径为“E:\book网页布 局代码第2章img/bg.jpg”






关闭
程序员人生