超链接课件全解

HTMLHTML 超 链 接 1.超链接基本知识。 2.超链接的建立方法。 3.内部链接、书签链接、外部链接。 超链接基本知识 1. 超链接 超文本链接（hypertextlink）通常简称为 超链接（hyperlink），或者简称为链接（link ）。链接是HTML 的一个最强大和最有价值 的功能。链接是指文档中的文字或者图像与另 一个文档、文档的一部分或者一幅图像链接在 一起。 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 盘，也可能在aa 目录下，更可能在bb 目录下 ，也就是说很有可能不存在 c:websiteimgphoto.jpg 这样一个路径。此 时就用到相对路径。所谓相对路径，顾名思义就 是自己相对于目标位置。在上例的index.htm 中 链接的photo.jpg 可以使用imgphoto.jpg 来定 位文件，那么不论将这些文件放到哪里，只要它 们的相对关系没有变，就不会出错。 在编程中使用“”来表示上一级目录， “”表示上上级的目录，以此类推。再看几 个例子，注意所有例子中都是index.htm 文件 中链接有一张图片photo.jpg。看下面这个例 子： c:websitewebindex.htm c:websiteimgphoto.jpg 在此例中，index.htm 中链接的photo.jpg 应 该怎样表示呢？错误写法：imgphoto.jpg，这 种写法是不正确的。在此例中，对于index.htm 文件来说，imgphoto.jpg所代表的绝对路径是 c:websitewebimgphoto.jpg，显然不符合要 求。 正确写法：使用imgphoto.jpg 的相对路径 来定位文件。 对于相对路径来说，设置起来一般有如下 3 种写法： 1.同一目录下的文件：只需要输入链接文件的名称即 可，如01.html。 2.上一级目录中的文件，在目录名和文件名之前加入 “/”，如/04/02.html；如果是上两级，则需要加入 两个“/”，如/file/01.html。 3.下一级目录：输入目录名和文件名，之间以“/”隔开 ，如：Html/05/01.html。除了绝对路径和相对路径 之外，还有一种称为根目录。根目录常常在大规模站 点需要放置在几个服务器上，或者一个服务器上同时 放置多个站点时使用。其书写形式很简单，只需要以 “/”开始，表示根目录，之后是文件所在的目录名和文 件名。 超链接标记的基本语法 超级链接的语法根据其链接对象的不同而有所变 化，但都是基于标记的。 语法：链接元素或链接元素 说明：在该语法中，链接元素可以是文字， 也可以是图片或其他页面元素。其中href 是 hypertextreference 的缩写。通过超级链接的 方式可以使各个网页之间链接起来，使网站中众 多的页面构成一个有机整体，使访问者能够在各 个页面之间跳转。超级链接可以是一段文本、一 幅图像或其他网页元素，当在浏览器中用鼠标单 击这些对象时，浏览器可以根据指示载入一个新 的页面或者转到页面的其他位置。 2 建立文本超链接 在网页中，文本超链接是最常见的一种。它通 过网页中的文件和其他的文件进行链接。 语法：链接文字 说明：在该语法中，链接地址可以是绝对地址，也 可以是相对地址。 文本链接 神话故事：八仙斗花龙 下一篇：女娲补天 传说，有一天八仙要到东海去游蓬莱岛。本来， 腾云驾雾，一眨眼就可到，可是吕纯阳偏偏别出心裁，提出要乘船过海，观 赏海景。他拿来铁拐李的拐杖，往海里一抛，喝声“变”，顿时变成一艘宽敞 、漂亮的大龙船，八位大仙坐船观景，喝酒斗歌，好不热闹。不料，因此惹 出一场麻烦来。原来，龙宫里有条花鳞恶龙，是龙王的第七个儿子，称为“花 龙太子”。这天，他闲得没事，在水晶宫外游荡，忽闻海面上有仙乐之声，便 循声寻去，猛见一条雕花龙船，内坐八位奇形怪状的大仙，其中有个妙龄女 郎，楚楚动人，花龙太子见此仙姿，魂魄俱消，早忘了师傅南极仙翁的忠告 ，忘了龙王母的训导，想入非非，似魔似痴地迷上何仙姑了。 在这段代码中，有一个文本链接“下一篇：女娲补天”，它链接到了当前目 录下的next.html 文件。 14 文本链接 神话故事：女娲补天 上一篇：八仙斗花龙 有一天，大龙和精卫、小太极一起到远古 时代去玩，居然看到了传说中能顶住上天、撑开天与地的不周山， 也遇到了美丽的女娲娘娘，甚至看到女娲补天的过程那真是一场惊 天地而泣鬼神的经历，讲来都令人鼻酸！ 天上的大神女娲，用泥土做成泥娃娃，再 赋予它们生命。从此女娲创造了人，人们世世代代繁衍生息，过着幸福 的生活。然而，好景不长。有一年，火神祝融和水神共工打起仗来。共 工把撑天的柱子不周山撞倒了，天塌下半边来，砸了很多窟窿，把地也 砸裂了，地上的洪水及天河的水不停地漏下来，造成大地上水患、火海 ，真是悲惨啊！ 设置超链接的目标窗口 在创建网页的过程中，有时候并不希望超链接的 目标窗口将原来的窗口覆盖，比如希望不论链接到 何处，主页面都保留在原处。这时可以通过target 参数设置目标窗口的属性。 语法：链接元素 说明：在该语法中，target 参数的取值有4 种 target值 目标窗口的打开方式 _parent 在上一级窗口打开，常在分帧的框架页面中使用 _blank 新建一个窗口打开 _self 在同一窗口打开，与默认设置相同 _top 在浏览器的整个窗口打开，将会忽略所有的框架结构 目标窗口的打开方式 世界影片介绍 孤岛The Island 导演：迈克尔贝 Michael Bay 编剧：艾里克斯库兹曼 Alex Kurtzman 主演：伊万迈克格雷戈 Ewan McGregor 斯嘉丽约翰森 Scarlett Johansson 迪蒙郝德森 Djimon Hounsou 迈克尔克拉克邓肯Michael Clarke Duncan 类型：动作/剧情/科幻/惊悚 级别：PG-13 发行：梦工场 Dreamwork 上映日期：2005 年7 月22 日 官方网站：/ 影片详情 more.html 文件的代码如下： 目标窗口的打开方式 影片详情 孤岛The Island 男青年林肯6E（伊万迈克格雷戈）生活在 一个貌似乌托邦、却被21 世纪中叶先进的科学技术设备武装起来的社区 里。 但是，不久后的一个意外让林肯惊觉：原来 ，他头脑中一切关于自己身世和整个这个社区的认识都是一个巨大的谎 言！他和社区里的所有居民其实都是“神秘岛”居民们的克隆人，他们的 存在只是为了给他们的“原型”提供各种更换用的身体零件，而这个社区 其实只是个软禁他们的牢笼 内部 链 接 在各种超链接中，根据链接对象的不同，设 置的方式也有所区别。内部链接是指链接的对 象是在同一个网站中的资源。下面通过一个实 例说明在一个网站中内部链接的实现方法。 在本实例中共包含 3 个文件，分别为 index.html、film1.html 和film2.html。其中， index.html 作为一个起始页面，另外两个文件 放置在与index.html 文件同级的film 文件夹中 。本实例通过3 个文件的互相连接说明在网站 内部进行链接的方法。 文件 index.html 的代码如下： 内部链接的实现 世界影片介绍 征婚启事Must Love Dogs 导演编剧：格雷大卫古德伯格 Gary David Goldberg 主演：戴安莲恩 Diane Lane 克里斯托佛布拉默 Christopher Plummer 约翰库萨克 John Cusack 伊丽莎白博金斯 Elizabeth Perkins 类型：爱情 地区：美国 上映日期：2005 年7 月 影片详情 帝企鹅日记LA MARCHE DE LEMPEREUR 导演/编剧：吕克贾盖 Luc Jacquet 主演：Romaine Bohringer Charles Berling Jules Sitruk 类型：剧情 地区：法国 上映日期：2005 年8 月 影片详情 影片“征婚启事”的介绍文件 film1.html 的代码如下： 内部链接的实现 征婚启事Must Love Dogs 剧情介绍： 搞对象从来就不是什么轻松的事情。有 好事者曾经总结过如下的爱情黄字公式：一份羞辱+两份恼怒+一 些对未来“好运气“的盲从=所谓爱情。而现如今的搞对象方式就 更没法让人乐观了，网络交友、吃饭相亲、朋友或亲戚的胡乱介 绍到底怎样才能找到合适的意中人啊？ 返回 下一个影片介绍 初始页面index.html 则位于该文件的上 一级目录中，在链接时需要在文件名前添加 “/”。而影片“帝企鹅日记”的影片介绍与文件 film1.html 位于同一目录下，是同级文件，在 链接时只需要将链接地址设置为该文件名 film1.html 即可。 文件film2.html 的代码如下： 内部链接的实现 帝企鹅日记LA MARCHE DE LEMPEREUR 剧情介绍： 本片记录的是在南极大陆上生活的帝企鹅的生存 和繁衍的故事。影片展示了帝企鹅这个滑稽、可爱而又坚强的物种怎样与严 酷的自然环境和它们的天敌作斗争，怎样对小企鹅倾注它们的爱，从而完成 它们的生命延续之旅。 返回 下一个影片介绍 5 书签 链 接 当创建的网页内容特别多时，可以通过书签 对内容进行链接，这样读者在阅读时可以通过 书签进行内容的跳转，这种链接也称为网页内 部的书签链接。 5.1 建立书签 书签可以与链接文字在同一页面，也可以在不同的页 面。但要实现网页内部的书签链接，都需要先建立书签 。通过建立的书签才能对页面的内容进行引导和跳转。 语法：文字 说明：在该语法中，书签名称就是对于后面要跳转所创建 的书签，而文字则是设置链接后跳转的位置。 实例代码： 定义书签 爱情测试：你的恋爱狂热度是多少 选择A：凌晨零时到清晨六点 向来朝气蓬勃的你，的确喜欢谈恋爱 ，喜欢那种活力十足的感觉，但是你的恋爱狂热度，却是平平而 已。因为你对生活中的其他事物，如你个人的嗜好，也有着恋爱 般的热度，过度分散目标的结果，使你的恋爱狂热度只有 30% 选择B：清晨六点到中午十二点 你那死不服输的性格将你在人群中独 立出来，恋爱的时候，亦因为不肯对对方坦白而遭抛弃，你唯一 的好处是你绝不拖拖拉拉没完没了。但是有时候恋爱也要讲小策 略的哦，偶尔“认输”也未尝不是件好事！ 选择C：中午十二点到下午六点 你是个十分理智的MM，但聪明反被 聪明误哦，你对每件事都小心谨慎，在爱情道路上，因怕受伤而 不敢用情太深，但这会令你的恋人有种被忽视的感觉，对你的热 情亦因此大减，其实有时候在他面前装迷糊装可爱，他会更加喜 欢你哦。 选择D：下午六点到凌晨零点 你有点神经质哦，但是是 个很执著的MM，别人很难适应你的处世作风哦，你 的男朋友也一样哦，你一时对他风情万种，一时对他 冷若冰霜，令他感到十分迷惑。即使对你一见钟情， 他亦会被你给他飘忽不定的感觉而吓得溜之大吉，要 改变这样的状况，MM 可要好好控制一下自己的情绪 哦！ 在这段代码中，定义了4 个书签，分别命名为 answerA、answerB、answerC 和answerD。 5.2 链接到同一页面的书签 下面就可以为刚才制作的书签添加链接内容 了。在代码的前面增加链接文字和链接地址就 能够实现同页面的书签链接。 语法：链接的文字 说明：在该语法中，书签的名称就是刚才所定义 的书签名，也就是name 的赋值。而#则代表 这是书签的链接地址。实例代码： 定义书签 爱情测试：你的恋爱狂热度是多少 情窦初开的漂亮小MM 终于找到了心中的白马王子啦 ！可是可是是不是好想好想将感情更顺利地进行下去、急速 升温？那么，可爱的MM 们快来做这个测试吧保证让你和心 中的白马王子开开心心一路牵手到底。一天之中，你最喜欢什么 时间哦？ A:凌晨零时到清晨六点 B:清晨六点到中午十二点 C:中午十二点到下午六点 下午六点到凌晨零时 选择A：凌晨零时到清晨六点 向来朝气蓬勃的你，的确喜欢谈恋爱，喜欢那 种活力十足的感觉，但是你的恋爱狂热度，却是平平而已。因为你对生活 中的其他事物，如你个人的嗜好，也有着恋爱般的热度，过度分散目标的 结果，使你的恋爱狂热度只有30% 选择B：清晨六点到中午十二点 你那死不服输的性格将你在人群中独立出来， 恋爱的时候，亦因为不肯对对方坦白而遭抛弃，你唯一的好处是你绝不拖 拖拉拉没完没了。但是有时候恋爱也要讲小策略的哦，偶尔“认输”也未尝 不是件好事！ 选择C：中午十二点到下午六点 你是个十分理智的MM，但聪明反被 聪明误哦，你对每件事都小心谨慎，在爱情道路上，因怕受伤而 不敢用情太深，但这会令你的恋人有种被忽视的感觉，对你的热 情亦因此大减，其实有时候在他面前装迷糊装可爱，他会更加喜 欢你哦。 选择D：下午六点到凌晨零点 你有点神经质哦，但是是个很执著的 MM，别人很难适应你的处世作风哦，你的男朋友也一样哦，你 一时对他风情万种，一时对他冷若冰霜，令他感到十分迷惑。即 使对你一见钟情，他亦会被你给他飘忽不定的感觉而吓得溜之大 吉，要改变这样的状况，MM 可要好好控制一下自己的情绪哦！ 运行这段代码，可以看到4 个文字链接。 在页面中单击其中的一个链接文字，页面将会 跳转到该链接的书签所在位置。单击“A：清晨 零时到清晨六点”,单击页面中的“C：中午十二 点到下午六点”，页面跳转到书签answerC 所 在的位置. 5.3 链接到不同页面的书签 书签链接不但可以链接到同一页面，也可 以在不同页面中设置。 语法： 链接的文字 说明：在该语法中，与同一页面的书签链接不同 的是，需要在链接的地址前增加文件所在的位 置。 定义书签 爱情测试：你的恋爱狂热