HTML超链接课件...ppt

《HTML超链接课件...ppt》由会员分享，可在线阅读，更多相关《HTML超链接课件...ppt（52页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、HTMLHTML超超 链链 接接 1.超链接基本知识。2.超链接的建立方法。3.内部链接、书签链接、外部链接。超链接基本知识超链接基本知识1.超链接超链接 超文本链接（hypertextlink）通常简称为超链接（hyperlink），或者简称为链接（link）。链接是HTML 的一个最强大和最有价值的功能。链接是指文档中的文字或者图像与另一个文档、文档的一部分或者一幅图像链接在一起。2 绝对路径绝对路径 绝对路径就是主页上的文件或目录在硬盘上的真正路径。使用绝对路径定位链接目标文件比较清晰，但是有两个缺点：一是需要输入更多的内容，二是如果该文件被移动了，就需要重新设置所有的相关链接。例如设置

2、路径为“C:Program files1.htm”3 相对路径相对路径 首先分析一下为什么会发生图片不能正常显示的情况.举一个例子，现在有一个页面 index.htm，在这个页面中链接有一张图片photo.jpg，它们的绝对路径如下：c:websiteindex.htm c:websiteimgphoto.jpg 如果使用绝对路径c:websiteimgphoto.jpg，那么在自己的计算机上将一切正常。因为确实可以在指定的位置（即c:websiteimgphoto.jpg）上找到photo.jpg 文件。但是当将页面上传到网站时就很可能会出错了，因为网站可能在服务器的c 盘，也可能在d 盘，

3、也可能在aa 目录下，更可能在bb 目录下，也就是说很有可能不存在c:websiteimgphoto.jpg 这样一个路径。此时就用到相对路径。所谓相对路径，顾名思义就是自己相对于目标位置。在上例的index.htm 中链接的photo.jpg 可以使用imgphoto.jpg 来定位文件，那么不论将这些文件放到哪里，只要它们的相对关系没有变，就不会出错。在编程中使用“.”来表示上一级目录，“.”表示上上级的目录，以此类推。再看几个例子，注意所有例子中都是index.htm 文件中链接有一张图片photo.jpg。看下面这个例子：c:websitewebindex.htmc:websiteim

4、gphoto.jpg 在此例中，index.htm 中链接的photo.jpg 应该怎样表示呢？错误写法：imgphoto.jpg，这种写法是不正确的。在此例中，对于index.htm 文件来说，imgphoto.jpg所代表的绝对路径是c:websitewebimgphoto.jpg，显然不符合要求。正确写法：使用.imgphoto.jpg 的相对路径来定位文件。对于相对路径来说，设置起来一般有如下对于相对路径来说，设置起来一般有如下 3 种写法：种写法：1.同一目录下的文件：只需要输入链接文件的名称即可，如01.html。2.上一级目录中的文件，在目录名和文件名之前加入“./”，如./04

5、/02.html；如果是上两级，则需要加入两个“./”，如././file/01.html。3.下一级目录：输入目录名和文件名，之间以“/”隔开，如：Html/05/01.html。除了绝对路径和相对路径之外，还有一种称为根目录。根目录常常在大规模站点需要放置在几个服务器上，或者一个服务器上同时放置多个站点时使用。其书写形式很简单，只需要以“/”开始，表示根目录，之后是文件所在的目录名和文件名。超链接标记的基本语法超链接标记的基本语法 超级链接的语法根据其链接对象的不同而有所变化，但都是基于标记的。语法：链接元素或链接元素 说明：在该语法中，链接元素可以是文字，也可以是图片或其他页面元素。其中

6、href 是hypertextreference 的缩写。通过超级链接的方式可以使各个网页之间链接起来，使网站中众多的页面构成一个有机整体，使访问者能够在各个页面之间跳转。超级链接可以是一段文本、一幅图像或其他网页元素，当在浏览器中用鼠标单击这些对象时，浏览器可以根据指示载入一个新的页面或者转到页面的其他位置。2 建立文本超链接建立文本超链接 在网页中，文本超链接是最常见的一种。它通过网页中的文件和其他的文件进行链接。语法：链接文字说明：在该语法中，链接地址可以是绝对地址，也可以是相对地址。文本链接 神话故事：八仙斗花龙 下一篇：女娲补天    传说，有

7、一天八仙要到东海去游蓬莱岛。本来，腾云驾雾，一眨眼就可到，可是吕纯阳偏偏别出心裁，提出要乘船过海，观赏海景。他拿来铁拐李的拐杖，往海里一抛，喝声“变”，顿时变成一艘宽敞、漂亮的大龙船，八位大仙坐船观景，喝酒斗歌，好不热闹。不料，因此惹出一场麻烦来。原来，龙宫里有条花鳞恶龙，是龙王的第七个儿子，称为“花龙太子”。这天，他闲得没事，在水晶宫外游荡，忽闻海面上有仙乐之声，便循声寻去，猛见一条雕花龙船，内坐八位奇形怪状的大仙，其中有个妙龄女郎，楚楚动人，花龙太子见此仙姿，魂魄俱消，早忘了师傅南极仙翁的忠告，忘了龙王母的训导，想入非非，似魔似痴地迷上何仙姑了。在这段代码中，有一个文本链接“下一篇：女娲补

8、天”，它链接到了当前目录下的next.html 文件。14 文本链接 神话故事：女娲补天 上一篇：八仙斗花龙    有一天，大龙和精卫、小太极一起到远古时代去玩，居然看到了传说中能顶住上天、撑开天与地的不周山，也遇到了美丽的女娲娘娘，甚至看到女娲补天的过程那真是一场惊天地而泣鬼神的经历，讲来都令人鼻酸！    天上的大神女娲，用泥土做成泥娃娃，再赋予它们生命。从此女娲创造了人，人们世世代代繁衍生息，过着幸福的生活。然而，好景不长。有一年，火神祝融和水神共工打起仗来。共工把撑天的柱子不周山撞倒了，天塌下半边来，砸了很

9、多窟窿，把地也砸裂了，地上的洪水及天河的水不停地漏下来，造成大地上水患、火海，真是悲惨啊！设置超链接的目标窗口设置超链接的目标窗口 在创建网页的过程中，有时候并不希望超链接的目标窗口将原来的窗口覆盖，比如希望不论链接到何处，主页面都保留在原处。这时可以通过target 参数设置目标窗口的属性。语法：链接元素说明：在该语法中，target 参数的取值有4 种target值值 目标窗口的打开方式目标窗口的打开方式_parent 在上一级窗口打开，常在分帧的框架页面中使用_blank 新建一个窗口打开_self 在同一窗口打开，与默认设置相同_top 在浏览器的整个窗口打开，将会忽略所有的框架结构

10、目标窗口的打开方式 世界影片介绍 孤岛The Island 导演：迈克尔贝 Michael Bay 编剧：艾里克斯库兹曼 Alex Kurtzman 主演：伊万迈克格雷戈 Ewan McGregor      斯嘉丽约翰森 Scarlett Johansson      迪蒙郝德森 Djimon Hounsou      迈克尔克拉克邓肯Michael Clarke Duncan 类型：动作/剧情/科幻/惊悚 级别：

11、PG-13 发行：梦工场 Dreamwork 上映日期：2005 年7 月22 日 官方网站：theisland- more.html 文件的代码如下：目标窗口的打开方式 影片详情 孤岛The Island    男青年林肯6E（伊万迈克格雷戈）生活在一个貌似乌托邦、却被21 世纪中叶先进的科学技术设备武装起来的社区里。    但是，不久后的一个意外让林肯惊觉：原来，他头脑中一切关于自己身世和整个这个社区的认识都是一个巨大的谎言！他和社区里的所有居民其实都是“神秘岛”居民们的克隆人，他们的存在只是为了给他们的“原型

12、”提供各种更换用的身体零件，而这个社区其实只是个软禁他们的牢笼 内部内部 链链 接接 在各种超链接中，根据链接对象的不同，设置的方式也有所区别。内部链接是指链接的对象是在同一个网站中的资源。下面通过一个实例说明在一个网站中内部链接的实现方法。在本实例中共包含 3 个文件，分别为index.html、film1.html 和film2.html。其中，index.html 作为一个起始页面，另外两个文件放置在与index.html 文件同级的film 文件夹中。本实例通过3 个文件的互相连接说明在网站内部进行链接的方法。文件 index.html 的代码如下：内部链接的实现 世界影片介绍 征婚启

13、事Must Love Dogs 导演编剧：格雷大卫古德伯格 Gary David Goldberg 主演：戴安莲恩 Diane Lane      克里斯托佛布拉默 Christopher Plummer      约翰库萨克 John Cusack      伊丽莎白博金斯 Elizabeth Perkins 类型：爱情 地区：美国 上映日期：2005 年7 月 影片详情 帝企鹅日记LA MARCHE DE LEM

14、PEREUR导演/编剧：吕克贾盖 Luc Jacquet主演：Romaine Bohringer      Charles Berling      Jules Sitruk类型：剧情地区：法国上映日期：2005 年8 月 影片详情 影片“征婚启事”的介绍文件 film1.html 的代码如下：内部链接的实现 征婚启事Must Love Dogs 剧情介绍：    搞对象从来就不是什么轻松的事情。有好事者曾经总结过如下的爱情黄字公式：一

15、份羞辱+两份恼怒+一些对未来好运气的盲从=所谓爱情。而现如今的搞对象方式就更没法让人乐观了，网络交友、吃饭相亲、朋友或亲戚的胡乱介绍到底怎样才能找到合适的意中人啊？返回        下一个影片介绍 初始页面index.html 则位于该文件的上一级目录中，在链接时需要在文件名前添加“./”。而影片“帝企鹅日记”的影片介绍与文件film1.html 位于同一目录下，是同级文件，在链接时只需要将链接地址设置为该文件名film1.html 即可。文件film2.html 的代码如下：内部链接的实现 帝企鹅日记LA MA

16、RCHE DE LEMPEREUR 剧情介绍：    本片记录的是在南极大陆上生活的帝企鹅的生存和繁衍的故事。影片展示了帝企鹅这个滑稽、可爱而又坚强的物种怎样与严酷的自然环境和它们的天敌作斗争，怎样对小企鹅倾注它们的爱，从而完成它们的生命延续之旅。返回        下一个影片介绍 5 书签书签 链链 接接 当创建的网页内容特别多时，可以通过书签对内容进行链接，这样读者在阅读时可以通过书签进行内容的跳转，这种链接也称为网页内部的书签链接。5.1 建立书签建立书签 书签可以与链

17、接文字在同一页面，也可以在不同的页面。但要实现网页内部的书签链接，都需要先建立书签。通过建立的书签才能对页面的内容进行引导和跳转。语法：文字说明：在该语法中，书签名称就是对于后面要跳转所创建的书签，而文字则是设置链接后跳转的位置。实例代码：定义书签 爱情测试：你的恋爱狂热度是多少 选择A：凌晨零时到清晨六点    向来朝气蓬勃的你，的确喜欢谈恋爱，喜欢那种活力十足的感觉，但是你的恋爱狂热度，却是平平而已。因为你对生活中的其他事物，如你个人的嗜好，也有着恋爱般的热度，过度分散目标的结果，使你的恋爱狂热度只有30%选择B：清晨六点到中午十二点 &n

18、bsp;  你那死不服输的性格将你在人群中独立出来，恋爱的时候，亦因为不肯对对方坦白而遭抛弃，你唯一的好处是你绝不拖拖拉拉没完没了。但是有时候恋爱也要讲小策略的哦，偶尔“认输”也未尝不是件好事！选择C：中午十二点到下午六点    你是个十分理智的MM，但聪明反被聪明误哦，你对每件事都小心谨慎，在爱情道路上，因怕受伤而不敢用情太深，但这会令你的恋人有种被忽视的感觉，对你的热情亦因此大减，其实有时候在他面前装迷糊装可爱，他会更加喜欢你哦。选择D：下午六点到凌晨零点    你有点神经质哦，但是是个很执

19、著的MM，别人很难适应你的处世作风哦，你的男朋友也一样哦，你一时对他风情万种，一时对他冷若冰霜，令他感到十分迷惑。即使对你一见钟情，他亦会被你给他飘忽不定的感觉而吓得溜之大吉，要改变这样的状况，MM 可要好好控制一下自己的情绪哦！在这段代码中，定义了4 个书签，分别命名为answerA、answerB、answerC 和answerD。5.2 链接到同一页面的书签链接到同一页面的书签 下面就可以为刚才制作的书签添加链接内容了。在代码的前面增加链接文字和链接地址就能够实现同页面的书签链接。语法：链接的文字说明：在该语法中，书签的名称就是刚才所定义的书签名，也就是name 的赋值。而#则代表这是书

20、签的链接地址。实例代码：定义书签 爱情测试：你的恋爱狂热度是多少  情窦初开的漂亮小MM 终于找到了心中的白马王子啦！可是可是是不是好想好想将感情更顺利地进行下去、急速升温？那么，可爱的MM 们快来做这个测试吧保证让你和心中的白马王子开开心心一路牵手到底。一天之中，你最喜欢什么时间哦？A:凌晨零时到清晨六点 B:清晨六点到中午十二点 C:中午十二点到下午六点 下午六点到凌晨零时 选择A：凌晨零时到清晨六点    向来朝气蓬勃的你，的确喜欢谈恋爱，喜欢那种活力十足的感觉，但是你的恋爱狂热度，却是平平而已。因为你对生活中的其他事物，如你个

21、人的嗜好，也有着恋爱般的热度，过度分散目标的结果，使你的恋爱狂热度只有30%选择B：清晨六点到中午十二点    你那死不服输的性格将你在人群中独立出来，恋爱的时候，亦因为不肯对对方坦白而遭抛弃，你唯一的好处是你绝不拖拖拉拉没完没了。但是有时候恋爱也要讲小策略的哦，偶尔“认输”也未尝不是件好事！选择C：中午十二点到下午六点    你是个十分理智的MM，但聪明反被聪明误哦，你对每件事都小心谨慎，在爱情道路上，因怕受伤而不敢用情太深，但这会令你的恋人有种被忽视的感觉，对你的热情亦因此大减，其实有时候在他面前装迷糊装可爱，

22、他会更加喜欢你哦。选择D：下午六点到凌晨零点    你有点神经质哦，但是是个很执著的MM，别人很难适应你的处世作风哦，你的男朋友也一样哦，你一时对他风情万种，一时对他冷若冰霜，令他感到十分迷惑。即使对你一见钟情，他亦会被你给他飘忽不定的感觉而吓得溜之大吉，要改变这样的状况，MM 可要好好控制一下自己的情绪哦！运行这段代码，可以看到4 个文字链接。在页面中单击其中的一个链接文字，页面将会跳转到该链接的书签所在位置。单击“A：清晨零时到清晨六点”,单击页面中的“C：中午十二点到下午六点”，页面跳转到书签answerC 所在的位置.5.3 链接到不同页面的书签

23、链接到不同页面的书签 书签链接不但可以链接到同一页面，也可以在不同页面中设置。语法：链接的文字说明：在该语法中，与同一页面的书签链接不同的是，需要在链接的地址前增加文件所在的位置。定义书签 爱情测试：你的恋爱狂热度是多少  情窦初开的漂亮小MM 终于找到了心中的白马王子啦！可是可是是不是好想好想将感情更顺利地进行下去、急速升温？那么，可爱的MM 们快来做这个测试吧保证让你和心中的白马王子开开心心一路牵手到底。一天之中，你最喜欢什么时间哦？A：凌晨零时到清晨六点        B：清晨六点到中午十

24、二点 C：中午十二点到下午六点        D：下午六点到凌晨零时 单击其中的某个链接，例如“B：清晨六点到中午十二点”，就可以直接链接到书签所在的位置6外部外部 链链 接接 外部链接是指跳转到当前网页之外的资源中，例如其他网站中某个页面或元素。这种链接在设置时一般需要书写绝对地址，最常见的是使用URL 统一资源定位符“http:/”来表示。此外还有一些其他的格式，见表2。格 式 表示的含义http:/采用WWW服务进入万维网站点ftp:/通过FTP访问文件传输服务器telnet:/启动Telnet mailto:/直接启动邮件系统Email6.1通过通过HTTP 协议协议 网页中最常使用 HTTP 协议进行外部链接的是在设置友情链接时。语法：链接文字说明：在该语法中，http:/表明这是关于HTTP 协议的外部链接，而在其后则输入网站的网址即可。实例代码：唐诗宋词欣赏 浣溪沙苏轼游蕲水清泉寺，寺临兰溪，溪水西流。山下兰芽短浸溪，松间沙路净无泥。萧萧暮雨子规啼。谁道人生无再少？门前流水尚能西！休将白发唱黄鸡。更多唐诗宋词，请进入 在页面中包含一个文本链接，它所链接的地址就是万维网上的一个网址，单击链接文字可以打开如图所示的网站。