第四章建立超链接

最新推荐文章于 2022-02-28 08:48:08 发布

原创最新推荐文章于 2022-02-28 08:48:08 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #服务器 #文档 #url #网络协议 #图形

web design 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了HTML中建立超链接的方法，包括绝对路径、相对路径和根路径，并讲解了书签链接、内部链接、外部链接（如链接到其他站点、发送电子邮件、链接FTP）的应用。超链接是网页的灵魂，理解其工作原理和使用技巧对于创建交互性强的网站至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第四章建立超链接

请大家下载素材

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://www.sina.com.cn
相对路径
如：news/index.html
根路径
如：d│/web/news/index.html

1、绝对路径

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

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

其中网络协议是HTTP(Hypertext Transfer Protocol,超文本传输协议)，资源所在的主机名为：www.sina.com.cn,通常情况下使用默认的端口号８０，资源在WWW服务器主机web文件夹下，资源的名称为：index.html.。

例：http://www.163.net/myweb/book.htm（此网址为假设）
表明采用 http 从名为 www.163.net 的服务器上的目录 myweb 中获得文件book.htm

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书签链接

链接文档中的特定位置也叫书签链接，在浏览页面时如果页面很长，要不断的拖动滚动条给浏览带来不便，要是浏览者可以从上头阅读到尾，又可以选择自己感兴趣的部分阅读，这种效果就可以通过书签链接来实现，方法是选者一个目标定位点，用来创建一个定位标记，用属性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" target="_blank">清平調三首</A> 
<A href="#T.1">長干行</A> 
<A href="#T.3">月下獨酌</A>
<HR>

<H3><A NAME="T.2">清平調三首</A> </H3>

雲想衣裳花想容， 春風拂檻露華濃。 若非群玉山頭見， 會向瑤台月下逢。 一枝紅艷露凝香， 雲雨巫山枉斷腸。 借問漢宮誰得似？ 可憐飛燕倚新妝。 名花傾國兩相歡， 常得君王帶笑看。 解釋春風無限恨， 沈香亭北倚闌干。

<H3><A NAME="T.1">長干行</A> </H3>
<PRE>
妾髮初覆額， 折花門前劇。 郎騎竹馬來， 遶床弄青梅。 同居長干里， 兩小無嫌猜。 十四為君婦， 羞顏未嘗開。 低頭向暗壁， 千喚不一回。 十五始展眉， 願同塵與灰。 常存抱柱信， 豈上望夫臺。 十六君遠行， 瞿塘灩澦堆。 五月不可觸， 猿鳴天上哀。 門前遲行跡， 一一生綠苔。 苔深不能掃， 落葉秋風早。 八月蝴蝶來， 雙飛西園草。 感此傷妾心， 坐愁紅顏老。 早晚下三巴， 預將書報家。 相迎不道遠， 直至長風沙。

</PRE>
<A href="#top">唐诗欣赏</a>
 
<H3><A NAME="T.3">月下獨酌</A> </H3>
<PRE>
花間一壺酒， 獨酌無相親。 舉杯邀明月， 對影成三人。 月既不解飲， 影徒隨我身。 暫伴月將影， 行樂須及春。 我歌月裴回， 我舞影零亂。 醒時同交歡， 醉後各分散。 永結無情遊， 相期邈雲漢。
</PRE>
<a href="4-2-12.html#libai">李白蔑视权贵</a>
</BODY>
</HTML>

实例：4-2-12html

<html>
<head>
<title>李白</title>
</head>
<body>
<center>
<a href="4-2-11.html#lb"><h1 align="center">李白</h1></a>
李白（701~762）， 字太白，号青莲居士。 祖籍陇西成纪（今甘肃省天水市附近的秦安县）， 隋朝末年其先租因罪住在中亚细亚。 李白的家世和出生地至今还是个谜， 学术界说法不一。 一说李白就诞生在安西都护府所辖的碎叶城， 五岁时随父迁到绵州昌隆县青莲乡。 
李白性情豪放， 喜爱纵横家的作风， 爱好任侠之事，轻视财货。 早年在蜀中度过。他的父亲是个富商。 李白二十五岁开始漫游全国， 走过湖北，江西，河南，山东等地.

<A NAME="libai">李白蔑视权贵</A>， 传说他喝醉酒， 曾在玄宗面前使高力士给他脱靴。 高力士认为这是很大的耻辱， 就摘取李白诗句激怒杨贵妃。 玄宗每次让李白做官，杨贵妃就加以阻止。 李白知道玄宗的亲信对他有意见， 于是恳求还家。 玄宗赐给他财物，放他开. 
李白是我国唐代伟大的浪漫主义诗人， 被誉为“诗仙”。 他的诗豪迈瑰丽，诗里有突破现实的幻想。 也有对当时民生疾苦的反映和对政治黑暗的抨击。 他的散文具有清新明朗， 奔放流畅的特点。</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" title="打开新浪首页"><img src="../../imgelogo(3).gif/"></A> 
<A HREF="http://www.tsinghua.edu.cn">清华大学</A> 
<A HREF="http://www.pku.edu.cn">北京大学</A> 
<A HREF="http://www.shisu.edu.cn" target=_blank>上海外国语学院</A> 
</CENTER>
</BODY>
</HTML>

4-2-32 发送E-mail

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

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

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

邮件的参数

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

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

实例：4-2-32.html

<html>
<head>
<title>发送邮件</title>
</head>
<body>

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

</body>
</html>

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

4-2-33 链接FTP

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

语法格式：

实例：4-2-33.html

<html>
<head>
<title>链接ftp主机</title>
</head>
<body>

<a href=ftp://ftp.pku.edu.cn>北京大学ftp站点</a>

</body>
</html>