[设为首页] [加入收藏]    
提 示: 站长书库上线了。 站长招聘上人才沃
站长首页  |  站长下载  |  站长工具
站长素材  |  广告代码  |  网页特效
站长书库  |  站长招聘  |  建站软件
  您当前的位置: 首页 > 基础教程 > 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


实例:4-2-12html


 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


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


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

4-2-33 链接FTP

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

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

实例:4-2-33.html


    关于我们 - 联系我们 - 广告服务 - 网站地图 - 版权声明 - 人才招聘