HTML超链接课件

HTML超链接1.超链接基本知识。2.超链接的建立方法。3.内部链接、书签链接、外部链接。超链接基本知识1.超链接超文本链接（hypertextlink）通常简称为超链接（hyperlink），或者简称为链接（link）。链接是HTML的一个最强大和最有价值的功能。链接是指文档中的文字或者图像与另一个文档、文档的一部分或者一幅图像链接在一起。2绝对路径绝对路径就是主页上的文件或目录在硬盘上的真正路径。使用绝对路径定位链接目标文件比较清晰，但是有两个缺点：一是需要输入更多的内容，二是如果该文件被移动了，就需要重新设置所有的相关链接。例如设置路径为“C:\Programfiles\1.htm”3相对路径首先分析一下为什么会发生图片不能正常显示的情况.举一个例子，现在有一个页面index.htm，在这个页面中链接有一张图片photo.jpg，它们的绝对路径如下：c:\website\index.htmc:\website\img\photo.jpg如果使用绝对路径c:\website\img\photo.jpg，那么在自己的计算机上将一切正常。因为确实可以在指定的位置（即c:\website\img\photo.jpg）上找到photo.jpg文件。但是当将页面上传到网站时就很可能会出错了，因为网站可能在服务器的c盘，也可能在d盘，也可能在aa目录下，更可能在bb目录下，也就是说很有可能不存在c:\website\img\photo.jpg这样一个路径。此时就用到相对路径。所谓相对路径，顾名思义就是自己相对于目标位置。在上例的index.htm中链接的photo.jpg可以使用img\photo.jpg来定位文件，那么不论将这些文件放到哪里，只要它们的相对关系没有变，就不会出错。在编程中使用“..\”来表示上一级目录，“..\..\”表示上上级的目录，以此类推。再看几个例子，注意所有例子中都是index.htm文件中链接有一张图片photo.jpg。看下面这个例子：c:\website\web\index.htmc:\website\img\photo.jpg在此例中，index.htm中链接的photo.jpg应该怎样表示呢？错误写法：img\photo.jpg，这种写法是不正确的。在此例中，对于index.htm文件来说，img\photo.jpg所代表的绝对路径是c:\website\web\img\photo.jpg，显然不符合要求。正确写法：使用..\img\photo.jpg的相对路径来定位文件。对于相对路径来说，设置起来一般有如下3种写法：1.同一目录下的文件：只需要输入链接文件的名称即可，如01.html。2.上一级目录中的文件，在目录名和文件名之前加入“../”，如../04/02.html；如果是上两级，则需要加入两个“../”，如../../file/01.html。3.下一级目录：输入目录名和文件名，之间以“/”隔开，如：Html/05/01.html。除了绝对路径和相对路径之外，还有一种称为根目录。根目录常常在大规模站点需要放置在几个服务器上，或者一个服务器上同时放置多个站点时使用。其书写形式很简单，只需要以“/”开始，表示根目录，之后是文件所在的目录名和文件名。超链接标记的基本语法超级链接的语法根据其链接对象的不同而有所变化，但都是基于A标记的。语法：Ahref=文件名链接元素/A或Ahref=URL链接元素/A说明：在该语法中，链接元素可以是文字，也可以是图片或其他页面元素。其中href是hypertextreference的缩写。通过超级链接的方式可以使各个网页之间链接起来，使网站中众多的页面构成一个有机整体，使访问者能够在各个页面之间跳转。超级链接可以是一段文本、一幅图像或其他网页元素，当在浏览器中用鼠标单击这些对象时，浏览器可以根据指示载入一个新的页面或者转到页面的其他位置。2建立文本超链接在网页中，文本超链接是最常见的一种。它通过网页中的文件和其他的文件进行链接。语法：Ahref=链接地址链接文字/A说明：在该语法中，链接地址可以是绝对地址，也可以是相对地址。htmlheadtitle文本链接/title/headbodycenterh3神话故事：八仙斗花龙/h3/centerahref=next.html下一篇：女娲补天/abrbr    传说，有一天八仙要到东海去游蓬莱岛。本来，腾云驾雾，一眨眼就可到，可是吕纯阳偏偏别出心裁，提出要乘船过海，观赏海景。他拿来铁拐李的拐杖，往海里一抛，喝声“变”，顿时变成一艘宽敞、漂亮的大龙船，八位大仙坐船观景，喝酒斗歌，好不热闹。不料，因此惹出一场麻烦来。原来，龙宫里有条花鳞恶龙，是龙王的第七个儿子，称为“花龙太子”。这天，他闲得没事，在水晶宫外游荡，忽闻海面上有仙乐之声，便循声寻去，猛见一条雕花龙船，内坐八位奇形怪状的大仙，其中有个妙龄女郎，楚楚动人，花龙太子见此仙姿，魂魄俱消，早忘了师傅南极仙翁的忠告，忘了龙王母的训导，想入非非，似魔似痴地迷上何仙姑了。br/body/html在这段代码中，有一个文本链接“下一篇：女娲补天”，它链接到了当前目录下的next.html文件。14htmlheadtitle文本链接/title/headbodycenterh3神话故事：女娲补天/h3/centerahref=first.html上一篇：八仙斗花龙/abrbr    有一天，大龙和精卫、小太极一起到远古时代去玩，居然看到了传说中能顶住上天、撑开天与地的「不周山」，也遇到了美丽的女娲娘娘，甚至看到女娲补天的过程……那真是一场惊天地而泣鬼神的经历，讲来都令人鼻酸！br    天上的大神女娲，用泥土做成泥娃娃，再赋予它们生命。从此女娲创造了人，人们世世代代繁衍生息，过着幸福的生活。然而，好景不长。有一年，火神祝融和水神共工打起仗来。共工把撑天的柱子不周山撞倒了，天塌下半边来，砸了很多窟窿，把地也砸裂了，地上的洪水及天河的水不停地漏下来，造成大地上水患、火海，真是悲惨啊！br/body/html设置超链接的目标窗口在创建网页的过程中，有时候并不希望超链接的目标窗口将原来的窗口覆盖，比如希望不论链接到何处，主页面都保留在原处。这时可以通过target参数设置目标窗口的属性。语法：Ahref=链接地址target=目标窗口的打开方式链接元素/A说明：在该语法中，target参数的取值有4种target值目标窗口的打开方式_parent在上一级窗口打开，常在分帧的框架页面中使用_blank新建一个窗口打开_self在同一窗口打开，与默认设置相同_top在浏览器的整个窗口打开，将会忽略所有的框架结构htmlheadtitle目标窗口的打开方式/title/headbodycenterh2世界影片介绍/h2/centerhrsize=2color=#990000fontsize=4《孤岛》TheIsland/fontbrbr导演：迈克尔·贝MichaelBaybr编剧：艾里克斯·库兹曼AlexKurtzmanbr主演：伊万·迈克格雷戈EwanMcGregorbr      斯嘉丽·约翰森ScarlettJohanssonbr      迪蒙·郝德森DjimonHounsoubr      迈克尔·克拉克·邓肯MichaelClarkeDuncanbr类型：动作/剧情/科幻/惊悚br级别：PG-13br发行：梦工场Dreamworkbr上映日期：2005年7月22日br官方网站：theisland-themovie.com/brbrAhref=more.htmltarget=_blank影片详情/A/body/htmlmore.html文件的代码如下：htmlheadtitle目标窗口的打开方式/title/headbodycenterh2影片详情/h2/centerfontsize=4《孤岛》TheIsland/fontbrbr    男青年林肯·6E（伊万·迈克格雷戈）生活在一个貌似乌托邦、却被21世纪中叶先进的科学技术设备武装起来的社区里。br    但是，不久后的一个意外让林肯惊觉：原来，他头脑中一切关于自己身世和整个这个社区的认识都是一个巨大的谎言！他和社区里的所有居民其实都是“神秘岛”居民们的克隆人，他们的存在只是为了给他们的“原型”提供各种更换用的身体零件，而这个社区其实只是个软禁他们的牢笼……br/body/html内部链接在各种超链接中，根据链接对象的不同，设置的方式也有所区别。内部链接是指链接的对象是在同一个网站中的资源。下面通过一个实例说明在一个网站中内部链接的实现方法。在本实例中共包含3个文件，分别为index.html、film1.html和film2.html。其中，index.html作为一个起始页面，另外两个文件放置在与index.html文件同级的film文件夹中。本实例通过3个文件的互相连接说明在网站内部进行链接的方法。文件index.html的代码如下：htmlheadtitle内部链接的实现/title/headbodycenterh2世界影片介绍/h2/centerhrsize=2color=#990000fontsize=4征婚启事MustLoveDogs/fontbrbr导演编剧：格雷·大卫·古德伯格GaryDavidGoldbergbr主演：戴安·莲恩DianeLanebr      克里斯托佛·布拉默ChristopherPlummerbr      约翰·库萨克JohnCusackbr      伊丽莎白·博金斯ElizabethPerkinsbr类型：爱情br地区：美国br上映日期：2005年7月brbrAhref=film/film1.html影片详情/Ahrsize=3color=#990066fontsize=4帝企鹅日记LAMARCHEDEL'EMPEREUR/fontbrbr导演/编剧：吕克·贾盖LucJacquetbr主演：RomaineBohringerbr      CharlesBerlingbr      JulesSitrukbr类型：剧情br地区：法国br上映日期：2005年8月brbrAhref=film/film2.html影片详情/A/body/html影片“征婚启事”的介绍文件film1.html的代码如下：htmlheadtitle内部链接的实现/title/headbodyh3征婚启事MustLoveDogs/h3剧情介绍：brbr&n