HTML基础教程:建立超链接


HTML文件中最重要的应用之一就是超链接,超链接是一个网站的灵魂,web上的网页是互相链接的,单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件,这种具有超级链能力的操作,即称为超级链接。超级链接除了可链接文本外,也可链接各种媒体,如声音、图象、动画,通过它们我们可享受丰富多采的多媒体世界。

  建立超链接的标签为<A>和</A>

  格式为:<A HREF="资源地址"  TARGET="窗口名称" TITLE="指向连接显示的文字">超链接名称</A>

  说明:标签<A>表示一个链接的开始,</A>表示链接的结束;

  属性“HREF”定义了这个链接所指的目标地址;目标地址是最重要的,一旦路径上出现差错,该资源就无法访问

  TARGET:该属性用于指定打开链接的目标窗口,其默认方式是原窗口。

  建立目标窗口的属性

  属性值

  描 述

  _parent

  在上一级窗口中打开,一般使用分桢的框架页会经常使用

  _blank

  在新窗口打开

  _self

  在同一个桢或窗口中打开,这项一般不用设置

  _top

  在浏览器的整个窗口中打开,忽略任何框架

  TITLE:该属性用于指定指向链接时所显示的标题文字。

  "超链接名称"是要单击到链接的元素,元素可以包含文本,也可以包含图像。文本带下划线且与其它文字颜色不同,图形链接通常带有边框显示。用图形做链接时只要把显示图像的标志<img>嵌套在<A HREF="URL"></A>之间就能实现图像链接的效果。当鼠标指向"超链接名称"处时会变成手状,单击这个元素可以访问指定的目标文件。

  4-1 链接路径

  每一个文件都有自己的存放位置和路径,理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。

  URL(Uniform Resourc Locator)中文名字为"统一资源定位器"。指的就是每一个网站都具有的地址。同一个网站下的每一个网页都属于同一个地址之下,在创建一个网站的网页时,不需要为每一个连接都输入完全的地址,我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。因此,链接可以分以下三种:

绝对路径
如:http://book.chinaz.com/html/index.shtml
相对路径
如:html/index.shtml
根路径
如:d│/web/news/index.html

  1、绝对路径

  绝对路径:包含了标识INTERNET上的文件所需要的所有信息。文件的链接是相对原文档而定的。包括完整的协议名称,主机名称,文件夹名称和文件名称

  其格式为 : 通讯协议 ://服务器地址:通讯端口/文件位置....../文件名。

  lnternet遵循一个重要的协议及HTTP(Hypertext Transfer Protocol)超文本传输协议,http是用于传输Web页的客户端/服务器协议。当浏览器发出Web页请求时,此协议将建立一个与服务器的链接.当链接畅通后,服务器将找到请求页,并将它发送给客户端,信息发送到客户端后,http将释放此链接.这使得此协议可以接受并服务大量的客户端请求.

  Web应用程序是指Web服务器上包含的许多静态的和动态的资源集合.Web服务器承但着为浏览器提供服务的责任.

  book.chinaz.com就是资源所在的主机名为:通常情况下使用默认的端口号80,资源在book服务器主机html文件夹下,资源的名称为:index.shtml.。

  例 :http://book.chinaz.com/css/index.shtml(此网址为假设)

  表明采用 http 从名为 book.chinaz.com 的服务器上的目录 css 中获得文件index.shtml

  2、相对路径

  相对路经是以当前文件所在路径为起点,进行相对文件的查找。一个相对的URL不包括协议和主机地址信息,表示它的路径与当前文档的访问协议和主机名相同,甚至有相同的目录路径。通常只包含文件夹名和文件名。甚至只有文件名。可以用相对URL指向与源文档位于同一服务器或同文件夹中的文件。此时,浏览器链接的目标文档处在同一服务器或同一文件夹下。

  如果链接到同一目录下,则只需输入要链接文件的名称。

  要链接到下级目录中的文件。只需先输入目录名,然后加"/",再输入文件名。

  要链接到上一级目录中文件,则先输入"../",再输入文件名。 

  相对路径的用法

  相对路径名

  含 义

herf="shouey.html"

  shouey.html 是本地当前路径下的文件

herf="web/shouey.html" shouey.html 是本地当前路径下称做"web"子目录下的文件
herf="../shouey.html" shouey.html 是本地当前目录的上一级子目录下的文件
herf="../../shouey.html" shouey.html 是本地当前目录的上两级子目录下的文件

  3、根路径

  根路径目录地址同样可用于创建内部链接,但大多数情况下,不建议使用此种链接形式。

  根路径目录地址的书写也很简单,首先以一个斜杠开头,代表根目录,然后书写文件夹名,最后书写文件名。

  如果根目录要写盘符,就在盘符后使用"│",而不用":"  这点与DOS的写法不同。

  如:/web/highight/shouey.html

  d│/web/highight/shouey.html

  也许读者会问,链接本地机器上的文件时,应该使用相对路径还是根路径?在绝大多数情况下使用相对路径比较好,例如,用绝对路径定义了链接,当把文件夹改名或者移动之后,那么所有的链接都要失败,这样就必须对你的所有html文件的链接进行重新编排,而一旦将此文夹件移到网络服务器上时,需要重新改动的地方就更多了,那是一件很麻烦的事情。而使用相对路径,不仅在本地机器环境下适合,就是上传到网络或其他系统下也不需要进行多少更改就能准确链接。

  4-2  超链接的应用  

  4-2-1书签链接

  链接文档中的特定位置也叫书签链接,在浏览页面时如果页面很长,要不断的拖动滚动条给浏览带来不便,要是浏览者可以从上头阅读到尾,又可以选择自己感兴趣的部分阅读,这种效果就可以通过书签链接来实现,方法是选者一个目标定位点,用来创建一个定位标记,用<a>标签的属性name的值来确定定位标记名 <a name="定位标记名"> 。然后在网页的任何地方建立对这个目标标记的链接"标题",在标题上建立的链接地址的名字要和定位标记名相同,前面还要加上"#"号,<a href= "#定位标记名">。单击标题就跳到要访问的内容。

  书签链接可以在同一页面中链接,也可以在不同页面中链接,在不同页面中链接的前提是需要指定好链接的页面地址和链接的书签位置

  格式:

  在同一页面要使用链接的地址:

  <a href="#书签名称" target="窗口名称">超连链标题名称</a>

  在不同页面要使用链接的地址:

<a href="URL地址#书签名称" target="窗口名称">超链接标题名称</a>

  链接到的目的地址:

  <a name="书签名称">目标超链接名称</a>

  name的属性值为该目标定位点的定位标记点名称,是给特定位置点(这个位置点也叫锚点)起个名称。

  实例:4-2-11html

<HTML>
<HEAD>
<TITLE>唐诗欣赏</TITLE>
</HEAD>
<BODY>
<a name="top"><H2>唐诗欣赏</H2></a>
<a name="lb"><H2>李白</H2></a>
<A href="#T.2" _fcksavedurl="#T.2" target="_blank">清平调三首</A><br>
<A href="#T.1" _fcksavedurl="#T.1">长干行</A><br>
<A href="#T.3" _fcksavedurl="#T.3">月下独酌</A>
<HR>
<BR><BR>
<H3><A NAME="T.2">清平调三首</A> </H3>
云想衣裳花想容,<br>春风拂槛露华浓。<br>若非群玉山头见,<br>会向瑶台月下逢。<br>一枝红艳露凝香,<br>云雨巫山枉断肠。<br>借问汉宫谁得似?<br>可怜飞燕倚新妆。<br>名花倾国两相欢,<br>常得君王带笑看。<br>解释春风无限恨,<br>沈香亭北倚阑干。
<H3><A NAME="T.1">长干行</A> </H3>
<PRE>
妾发初覆额,<br>折花门前剧。<br>郎骑竹马来,<br>遶床弄青梅。<br>同居长干里,<br>两小无嫌猜。<br>十四为君妇,<br>羞颜未尝开。<br>低头向暗壁,<br>千唤不一回。<br>十五始展眉,<br>愿同尘与灰。<br>常存抱柱信,<br>岂上望夫台。<br>十六君远行,<br>瞿塘灩澦堆。<br>五月不可触,<br>猿鸣天上哀。<br>门前迟行迹,<br>一一生绿苔。<br>苔深不能扫,<br>落叶秋风早。<br>八月蝴蝶来,<br>双飞西园草。<br>感此伤妾心,<br>坐愁红颜老。<br>早晚下三巴,<br>预将书报家。<br>相迎不道远,<br>直至长风沙。
</PRE>
<A href="#top" _fcksavedurl="#top">唐诗欣赏</a>
<BR><BR>
<H3><A NAME="T.3">月下独酌</A> </H3>
<PRE>
花间一壶酒,<br>独酌无相亲。<br>举杯邀明月,<br>对影成三人。<br>月既不解饮,<br>影徒随我身。<br>暂伴月将影,<br>行乐须及春。<br>我歌月裴回,<br>我舞影零乱。<br>醒时同交欢,<br>醉後各分散。<br>永结无情游,<br>相期邈云汉。
</PRE>
<p><a href="4-2-12.html#libai" _fcksavedurl="4-2-12.html#libai">李白蔑视权贵</a></p>
</BODY>
</HTML>

  实例:4-2-12html

<html>
<head>
<title>李白</title>
</head>
<body>
<center>
<a href="4-2-11.html#lb" _fcksavedurl="4-2-11.html#lb"><h1 align="center"><font color="#339933">李白</font></h1></a>
<font color="#339933" size="+2">李白(701~762),<br>字太白,号青莲居士。<br>祖籍陇西成纪(今甘肃省天水市附近的秦安县),<br>隋朝末年其先租因罪住在中亚细亚。<br>李白的家世和出生地至今还是个谜,<br>学术界说法不一。<br>一说李白就诞生在安西都护府所辖的碎叶城,<br>五岁时随父迁到绵州昌隆县青莲乡。<br>
<p>李白性情豪放,<br>喜爱纵横家的作风,<br>爱好任侠之事,轻视财货。<br>早年在蜀中度过。他的父亲是个富商。<br>李白二十五岁开始漫游全国,<br>走过湖北,江西,河南,山东等地.<br></p>
<p><A NAME="libai">李白蔑视权贵</A>,<br>传说他喝醉酒,<br>曾在玄宗面前使高力士给他脱靴。<br>高力士认为这是很大的耻辱,<br>就摘取李白诗句激怒杨贵妃。<br>玄宗每次让李白做官,杨贵妃就加以阻止。<br>李白知道玄宗的亲信对他有意见,<br>于是恳求还家。<br>玄宗赐给他财物,放他开.<br></p>
<p>李白是我国唐代伟大的浪漫主义诗人,<br>被誉为“诗仙”。<br>他的诗豪迈瑰丽,诗里有突破现实的幻想。<br>也有对当时民生疾苦的反映和对政治黑暗的抨击。<br>他的散文具有清新明朗,<br>奔放流畅的特点。</p></font></center>
</body>
</html>

  4-2-2在站点内部建立链接

  所谓内部链接,指的是在同一个网站内部,不同的html页面之间的链接关系,在建立网站内部链接的时候,要明确哪个是主链接文件(即当前页),哪个是被链接文件。在前面介绍链接路径时,已经给大家介绍了内部链接概念,内部链接一般采用相对路径链接比较好。下面我们根据如图示,来看看相对路径的具体的链接方法:

  在站点内部建立链接

当前页面 被链接页面 超链接代码
2-1.html 3-1.html <a href="3-1.html">超链接元素</a>
3-1.html 1-1.html <a href="asm/1-1.html">超链接元素</a>
sy.html 1-1.html <a href="ssm/asm/1-1.html">超链接元素</a>
2-1.html sy.html <a href="../sy.html">超链接元素</a>
1-1.html sy.html <a href="../../sy.html">超链接元素</a>
sy.html 2-1.html <a href="ssm/2-1.html">超链接元素</a>

  4-2-3 外部链接

  所谓外部链接,指的是跳转到当前网站外部,与其它网站中页面或其它元素之间的链接关系。这种链接的URL地址一般要用绝对路径,要有完整的URL地址,包括协议名,主机名,文件所在主机上的的位置的路径以及文件名。

  最常用的外部链接格式是:<a href="http://网址">,还有其他的格式如下表所示:

  URL外链部接格式

服 务 URL格式 描 述
WWW http://"地址" 进入万维网站点
Ftp ftp://"" 进入文件传输协议
Telnet telnet://"" 启动Telnet方式
Gopher gopher://"" 访问一个gopher服务器
News news://"" 启动新闻讨论组
Email email://"" 启动邮件

  4-2-31 链接其它站点:

  站点之间的页面和元素的链接是万维网交流信息的关键,这种链接用HTTP协议来建立网站之间的超链接。

  格式:<A HREF="HTTP://"网址"> 

  实例:4-2-31.html

<HTML>
<HEAD>
<TITLE>链接到http://</TITLE>
</HEAD>
<BODY>
<CENTER>
<h2>绝对路径链接</h2>
<HR>
<A HREF="http://www.sina.com.cn" _fcksavedurl="http://www.sina.com.cn" title="打开新浪首页"><img src="/images/logo.gif" _fcksavedurl="/images/logo.gif/"></A><BR><BR>
<A HREF="http://www.tsinghua.edu.cn" _fcksavedurl="http://www.tsinghua.edu.cn">清 华 大 学</A><BR><BR>
<A HREF="http://www.pku.edu.cn" _fcksavedurl="http://www.pku.edu.cn">北 京 大 学</A><BR><BR>
<A HREF="http://www.shisu.edu.cn" _fcksavedurl="http://www.shisu.edu.cn" target=_blank>上海外国语学院</A><BR>
</CENTER>
</BODY>
</HTML>

  4-2-32 发送E-mail

  在HTML页面中,可以建立E-mail链接。当浏览者单击链接后,系统会启动默认的本地邮件服务系统发送邮件。

  基本语法:

<a href="mailto:E-mali 地址: subject=邮件主题">描述文字</a>

  在实际应用中,用户还可以加入另外的两个参数"?cc="E-mali地址"和"&body=?",这分别表示在发送邮件的同时把邮件抄送给第三者和设定邮件主题内容。

  邮件的参数

参   数 描   述
subject 电子邮件主题
cc 抄送收件人
body 主题内容
bcc 暗送收件人

  如果希望同时写下多个参数,则参数之间使用"&"分隔符。

  实例:4-2-32.html

<html>
<head>
<title>发送邮件</title>
</head>
<body>
<p>
<a href="mailto:zhoujr3071@yahoo.com.cn?cc=benbenmao@163.com&Subject=早安&bcc=a@b.c
&Body= 早安,笨笨猫祝你度过一个快乐的早晨!">
向笨笨猫的好友发送邮件(抄送 笨笨猫)
</a>
</p>
</body>
</html>

  单击"向笨笨猫的好友发送邮件(抄送 笨笨猫)"后打开了系统的邮件服务软件Outlook Exqress发送邮件。

  4-2-33 链接FTP

  lnternet上资源丰富,通过ftp文件传输协议,就可以获得各种免费软件和其他文件,ftp协议是使计算机与计算机之间能够相互通信的语言,ftp使文件和文件夹能够在lnternet上公开传输,通过ftp可以访问某个网络或服务器,而不需要该计算机的账户和授权的密码就可通过ftp公开获得数据

  语法格式:

<a href="ftp://ftp主机地址">文字链接</a>

  实例:4-2-33.html

<html>
<head>
<title>链接ftp主机</title>
</head>
<body>
<p>
<a href=ftp://ftp.pku.edu.cn _fcksavedurl="ftp://ftp.pku.edu.cn">北京大学ftp站点</a>
</p>
</body>
</html>a


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3