美文网首页
从屌丝到架构师的飞越(HTML篇)-HTML超链接

从屌丝到架构师的飞越(HTML篇)-HTML超链接

作者: 走着别浪 | 来源:发表于2019-08-04 13:29 被阅读0次

一、介绍

链接是指在电子计算机程序的各模块之间传递参数和控制命令,并把它们组成一个可执行的整体的过程。链接也称超级链接,是指从一个网页指向一个目标的连接关系,所指向的目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是图片、电子邮件地址、文件、甚至是应用程序。

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

二、知识点介绍

1、超链接

2、超链接格式

3、链接路径

4、超链接应用

三、上课对应视频的说明文档

1、超链接

HTML 文件中最重要的应用之一就是超链接,超链接是一个网站的灵魂,web 上的网页是互相链接的,单击被称为超链接的文本或图形就可以链接到其它页面。

超文本具有的链接能力,可层层链接相关文件,这种具有超级链能力的操作,即称为超级链接。

超级链接除了可链接文本外,也可链接各种媒体,如声音、图象、动画,通过它们我们可享受丰富多采的多媒体世界。

2、超链接格式

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

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

属性:

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

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

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

3、链接路径

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

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

链接分类:

绝对路径 如:http://www.sina.com.cn

相对路径 如:news/index.html

根路径 如:d│/web/news/index.html

3.1:绝对路径

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

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

3.2:相对路径

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

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

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

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

3.3:根路径

根路径目录地址同样可用于创建内部链接,但大多数情况下,不建议使用此种链接形式。根路径目录地址的书写也很简单,首先以一个斜杠开头,代表根目录,然后书写文件夹名,最后书写文件名。

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

/web/highight/shouey.html

d│/web/highight/shouey.html

4、超链接应用

4.1:书签链接

链接文档中的特定位置也叫书签链接,在浏览页面时如果页面很长,要不断的拖动滚动条给浏览带来不便,要是浏览者可以从上头阅读到尾,又可以选择自己感兴趣的部分阅读,这种效果就可以通过书签链接来实现。

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

<HTML>

<HEAD>

<TITLE>唐诗欣赏</TITLE>

</HEAD>

<BODY>

<a ><H2>唐诗欣赏</H2></a>

<a ><H2>李白</H2></a>

<A href="#T.2" target="_blank">清平調三首</A><br>

<A href="#T.1">長干行</A><br>

<A href="#T.3">月下獨酌</A>

<HR>

<BR><BR>

<H3><A >清平調三首</A> </H3>

雲想衣裳花想容,<br>春風拂檻露華濃。<br>若非群玉山頭見,<br>會向瑤台月下逢。<br>一枝紅艷露凝

香,<br>雲雨巫山枉斷腸。<br>借問漢宮誰得似?<br>可憐飛燕倚新妝。<br>名花傾國兩相歡,<br>常得

君王帶笑看。<br>解釋春風無限恨,<br>沈香亭北倚闌干。

<H3><A >長干行</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">唐诗欣赏</a>

<BR><BR>

<H3><A >月下獨酌</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">李白蔑视权贵</a></p>

</BODY>

</HTML>

格式:

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

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

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

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

➢ 链接到的目的地址:

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

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

<html>

<head>

<title>李白</title>

</head>

<body>

<center>

<a href="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 >李白蔑视权贵</A>,<br>传说他喝醉酒,<br>曾在玄宗面前使高力士给他脱靴。<br>高力士认为

这是很大的耻辱,<br>就摘取李白诗句激怒杨贵妃。<br>玄宗每次让李白做官,杨贵妃就加以阻止。<br>

李白知道玄宗的亲信对他有意见,<br>于是恳求还家。<br>玄宗赐给他财物,放他开.<br></p>

<p>李白是我国唐代伟大的浪漫主义诗人,<br>被誉为“诗仙”。<br>他的诗豪迈瑰丽,诗里有突破现实的幻

想。<br>也有对当时民生疾苦的反映和对政治黑暗的抨击。<br>他的散文具有清新明朗,<br>奔放流畅的

特点。</p></font></center>

</body>

</html>

4.2:在站点内部建立链接

所谓内部链接,指的是在同一个网站内部,不同的html 页面之间的链接关系,在建立网站内部链接的时候,要明确哪个是主链接文件(即当前页),哪个是被链接文件。

4.3:外部链接

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

A、链接其他站点

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

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

<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><BR><BR>

<A HREF="http://www.tsinghua.edu.cn">清华 大 学</A><BR><BR>

<A HREF="http://www.pku.edu.cn">北京 大 学</A><BR><BR>

<A HREF="http://www.shisu.edu.cn" target=_blank>上海外国语学院</A><BR>

</CENTER>

</BODY>

</HTML>

B、发送E-mail

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

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

<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>

C、链接FTP

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

语法格式:

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

<html>

<head>

<title>链接ftp 主机</title>

</head>

<body>

<p>

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

</p>

</body>

</html>

D、图像的超链接

图像的链接和文字的链接方法是一样的,都是用<a>标签来完成,只要将<img>标签放在<a>和</a>只见就可以了。用图像链接的图片的上有蓝色的边框,这个边框颜色也可以在<body>标签中设定。

<html>

<head>

<title>使用图像为选取的对象</title>

</head>

<body>

<p align="center">&nbsp;</p>

<h1 align="center">图片的超链接</h1>

<P>

<center>

<a href="http://www.sohu.com/" target="_blank"><img alt="搜狐网站"

src="../../imge/logo[1].gif"></a><p>

<a href="http://www.baidu.com/"><img alt="百度搜索"

src="../../imge/logo[2].gif"></a><p>

<a href="http://www.sina.com.cn"><img alt="新浪网站" src="../../imge/logo(3).gif"></a>

</center>

</body>

</html>

相关文章

网友评论

      本文标题:从屌丝到架构师的飞越(HTML篇)-HTML超链接

      本文链接:https://www.haomeiwen.com/subject/mgvorctx.html