HTML-超链接HTML-超链接基本概念链接标记内部链接书签链接外部链接一、基本概念URL绝对路径相对路径根路径URLURL(UniformResourceLocator):统一资源定位符。基本结构:protocol://siteaddress/directory/filename例:://://ftp.democompany.com/info/fi1.exe@ftp.democompany.com/info/fi1.exetelnet://tlj:123@host.democompany.com:94相对路径和绝对路径的使用方法:ch6dir1dir2ch6_1.htmsea.gifch7ch7_1.htmdir3ch7_2.htm引用者被引用者相对路径绝对路径ch6_1.htmsea.gif../dir2/sea.gif/ch6/dir2/sea.gifch7_2.htmsea.gif../../ch6/dir2/sea.gif/ch6/dir2/sea.gifch6_1.htmch7_1.htm../../ch7/ch7_1.htm/ch7/ch7_1.htmch7_2.htmch7_1.htm../ch7_1.htm/ch7/ch7_1.htm如果引用文件存在与当前目录的子目录下,或存在于上一层目录的另一个子目录中时,运用相对路径是比较方便的。如果不是这种情况,则干脆利用绝对路径,比较省事。从表中也可以看出,当被引用的是同一个文件时,不论从哪个文件引用,所使用的绝对路径都是一样的。绝对路径绝对路径:协议+网址+目录+文件名协议:HTTP、FTP、FILE、Telnet等网址:域名地址、IP地址目录:用“/”而不是“\”文件名:8.3格式用户名和密码:某些协议如FTP、Telnet需要验证。相对路径相对路径:(目录)+文件名目录:链接到同一目录,只需输入链接文件名链接到下一级目录,先输入目录名,再输入文件名:目录名/文件名链接到上一级目录,先输入“../”基底网址相对路径和绝对路径的基本概念:相对路径:是以引用文件的网页所在位置为参考基础,而建立的目录路径。因此,当不同的网页引用同一个文件时,其所使用的路径都不相同,故称之为相对。相对路径最适合于网站的内部链接。绝对路径:是以Web站点的根目录为参考基础的目录路径。之所以称为绝对,意思是指当所有网页引用同一个文件时,所使用的路径都是一样的。当链接到其他网站中的文件时,必须使用绝对路径。基底网址标记BASEBASE标记可以设定URL地址,一般用来设定浏览器中文件的绝对路径,因而HTML文件中标识的其他文件就只需要写下相对路径。一篇文档中BASE标记不能多于一个,必须放于头部(head中),在任何保护URL地址的语句之前。基本语法:BASEHREF=“URL”TARGET=“WINDOW_NAME”根路径根路径:一种特别的相对路径例:/info/fi1.exe下列情况可使用:当站点放于几个服务器上时当一个服务器上放置几个站点时不建议使用二、链接标记A属性描述Href指定链接地址Name给链接命名Title给链接提示文字Target指定链接的目标窗口A的属性超链接标记的基本语法:AHREF=“链接位置”超链接名称/A•超链接名称此字符串将显示于网页中,代表此超链接,并供用户点选超链接用,也可用图文件来代替字符串代表超链接。•链接位置指定href属性,用来放置超链接的目标,可使用URL指定。URL的格式是由通讯协议、链接地址与文件位置所组成,如:通讯协议://链接地址/文件位置……/文件名称三、内部链接内部链接:同一网站内部不同HTML页面之间的链接关系。制作内部链接HTMLch7ex0366.htmex0366-1.htmex0366-2.htmTEXT!--文件范例:ex0366.htm--!--文件说明:建立内部链接--htmlheadtitle建立内部链接/title/headbodyh1主流的网页设计软件/h1pMACROMEDIA公司的网页设计三剑客DREAMWEAVER、FLASH、FIREWORKS。/pahref=ex0366-1.htm网页制作软件DREAMWEAVERMX2004/abrahref=“test/ex0366-2.htm网页动画软件FLASHMX2004/a/body/html!--文件范例:ex0366-1.htm--!--文件说明:内部链接文件之一--htmlheadtitleDreamweaverMX2004/title/headbodyh1主流的网页设计软件/h1pDREAMWEAVERMX2004作为网页设计软件的代表,具有站点管理和页面制作两大核心功能。/pahref=“ex0366.htm”返回/a/body/html!--文件范例:ex0366-2.htm--!--文件说明:内部链接文件之二--htmlheadtitle内部链接文件之二/title/headbodyh1网页动画软件FLASHMX2004/h1pFLASHMX2004作为网页矢量交互动画软件的代表,提供了图形绘制、动画制作和交互三大功能。/pahref=“../ex0366.htm”返回/a/body/html四、书签链接建立书签链接到同一页面中的书签链接到其他页面中的书签书签链接:建立书签链接的步骤:书签链接,是指浏览者单击浏览目录上的项目就能自动跳到网页相应的位置进行阅读。如:返回首页等。•建立书签;•为书签制作链接。链接指针可以使读者在整个因特网网上方便的跳跃浏览,当一个HTML较长时,还可以在文件中建立一些链接,实现同一文件中内容的跳跃浏览。对于一个完整的文件,可以用URL来唯一地标识被指向的目标,但对于同一文件的不同部分,被指向的目标是通过a标记的NAME属性来定义。建立书签的格式:aname=“name”text/aNAME属性用来给被链接的部分起名字并加标记,text是可选项。为书签制作链接:ahref=“URL#name”text/a其中的URL是放置标记的HTML文件的URL,name是标记名,对于同一个文件,可以写为ahref=“#name”text/a。这时就可以点取text跳转到标记名为name的位置。!--文件范例:ex0367.htm--!--文件说明:建立书签链接--htmlheadtitle建立书签链接/title/headbodyh1主流的网页设计软件/h1aname=dwh3DreamweaverMX2004/h3/apDREAMWEAVERMX2004作为网页设计软件的代表.……/paname=flh3FlashMX2004/h3/apFLASHMX2004作为网页矢量交互动画软件的代表。……/paname=fwh3FireworksMX2004/h3/apFireworksMX2004作为网页图像设计软件的代表。……/p/body/html!--文件范例:ex0368.htm--!--文件说明:链接到同一页面的书签--htmlheadtitle链接到同一页面的书签/title/headbodyh1主流的网页设计软件/h1ahref=#dwDreamweaverMX2004/aahref=#flFlashMX2004/aahref=#fwFireworksMX2004/a……!--文件范例:ex0369.htm--!--文件说明:链接到不同页面的书签--htmlheadtitle链接到不同页面的书签/title/headbodyh1主流的网页设计软件/h1ahref=ex0368.htm#dwDreamweaverMX2004/aahref=ex0368.htm#flFlashMX2004/aahref=ex0368.htm#fwFireworksMX2004/a/body/html五、外部链接链接到外部网站链接FTP链接Telnet链接到新闻组发送Email下载文件!--文件范例:ex0370.htm--!--文件说明:链接到外部网站--htmlheadtitle链接到外部网站/title/headbodyahref=新浪网站/a/body/html!--文件范例:ex0371.htm--!--文件说明:链接FTP主机--htmlheadtitle链接FTP主机/title/headbodyahref=站点/a/body/html!--文件范例:ex0372.htm--!--文件说明:链接Telnet--htmlheadtitle链接Telnet/title/headbodyahref=“telnet://162.105.203.245:23”北京大学未名站/a/body/html!--文件范例:ex0373.htm--!--文件说明:链接News新闻组--htmlheadtitle链接News新闻组/title/headbodyahref=news://news.newsfan.netNews新闻组/a/body/html发送Email基本语法:Ahref=“mailto://a@b”链接文字/AAhref=“mailto://a@b?subject=content”链接文字/AAhref=“mailto://a@b?cc=a@b”链接文字/AAhref=“mailto://a@b?bcc=a@b”链接文字/A!--文件范例:ex0374.htm--!--文件说明:发送电子邮件--htmlheadtitle发送电子邮件/title/headbodyahref=“mailto:hav123@126.com”李老师/abrahref=“mailto:wangye20031@126.com?subject=HTML网页制作作业(叶伟,信管1班1号)&cc=yahoo@yahoo.com&bcc=sina@126.com”黄老师/a/body/html效果!--文件范例:ex0375.htm--!--文件说明:下载文件--htmlheadtitle下载文件/title/headbodyahref=“setup.exe下载软件/a/body/html设定链接的目标窗口单击超链接后,默认的浏览器窗口是原有窗口,实际上,我们在操作时,还可以指定所使用的超链接所打开的目标窗口,如开新窗口等。基本语法:Ahref=“URL”target=“value”……/A属性值描述_parent在上一级窗口中打开,常用于分帧的框架_blank在新窗口中打开_self在同一窗口或帧中打开(默认值)_top在浏览器的整个窗口中打开,忽略任何框架!--文件范例:ex0377.htm--!--文件说明:链接的提示文字--htmlheadtitle链接的提