第5章超级链接.

CompanynameWEB编程基础第5章超级链接清华大学出版社主要内容•为网页添加超链接•添加书签链接、电子邮件超链接、FTP链接•建立图像映射5.1超链接简介网页文件的最大魅力是超越各个文件的空间，通过超链接相互连接构成一个纷繁复杂的互联网世界。超链接（hyperlink）是一个网站的精髓，超链接在本质上属于一个网页的一部分，它是一种允许一个网页同其他网页或站点之间进行链接的元素。各个网页链接在一起后，才能真正构成一个网站。超文本具有的链接能力，层层链接相关文件，这种具有超级链能力的特性，即称为超链接。超链接除了可链接文本外，也可链接各种媒体，如声音、图像和动画等，通过它们可以将网站建设成一个丰富多彩的多媒体世界。5.1超链接简介5.1超链接简介5.2创建超链接建立超链接的标记是a(anchor，锚)，以a开始，以/a结束，锚可以指向网络上的任何资源：一张HTML页面，一幅图像，一个声音或视频文件等。基本语法：ahref=urltitle=指向链接显示的文字target=窗口名称超链接名称/aa常用属性：1.href：链接的目标。2.name：锚点的名字。3.target：目标窗口。保留目标名有：_blank、_parent、_top、_self。5.2创建超链接!—程序5-1--htmlheadtitle创建链接/title/headbodycenterh2创建链接/h2hrpahref==打开新浪首页新浪/a!--添加新浪链接--brahref==_blank百度/a!--添加百度链接--brahref=北京大学/a!--添加北京大学链接--/p/center/body/html5.2创建超链接5.2.1设置超链接路径建立链接时，属性“href”定义了这个链接所指的目标地址，也就是路径。理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。每一个网站都具有独一无二的地址，英文中被称作URL（UniformResourceLocator），即统一资源定位器，同一个网站下的每一个网页都有不同的地址，但是在创建一个网站的网页时，不需要为每一个链接都输入完整的地址，我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。5.2.2内部链接所谓内部链接，指的是在同一个网站内部，不同的html页面之间的链接关系，在建立网站内部链接的时候，要明确哪个是主链接文件（即当前页），哪个是被链接文件。内部链接一般采用相对路径链接比较好。根据图5-4所示的某班级网站站点目录结构，表5-2所示的是内部链接语句中相对路径的写法。5.2.2内部链接5.2.3外部链接所谓外部链接，指的是跳转到当前网站外部，与其它网站中页面或其它元素之间的链接关系。这种链接的URL地址一般要用绝对路径，要有完整的URL地址。5.3.1图片链接可以为一个图片指定链接。基本语法：ahref=urltarget=目标窗口的打开方式imgsrc=图片地址/a5.3.1图片链接!--程序5-2--htmlheadtitle建立图片链接/title/headbodycenterh2图片链接/h2hrahref==_blankimgsrc=images/baidu_logo.gif//a/center/body/html5.3.1图片链接5.3.2书签链接在浏览页面时，如果页面篇幅很长，要不断的拖动滚动条，给浏览带来不便，要是浏览者既可以从头阅读到尾，又可以很快寻找到自己感兴趣的特定内容进行部分阅读，这个时候就可以通过书签链接来实现。当浏览者单击页面上的某一“标签”，就能自动跳到网页相应的位置进行阅读，给浏览者带来方便。5.3.2书签链接基本语法：在同一页面内要使用书签链接的格式：ahref=#书签名称target=窗口名称链接标题/a在不同页面之间要使用书签链接的格式（在不同页面中链接的前提是需要指定好链接的页面地址和链接的书签名称）：ahref=URL地址#书签名称target=窗口名称链接标题/a以上两种书签链接形式，链接到的目标为：aname=书签名称链接内容/a。5.3.2书签链接5.3.2书签链接5.3.2书签链接5.3.3电子邮件链接在HTML页面中建立E-mail链接，用户单击链接，系统会自动启动默认的电子邮件软件，打开一个邮件窗口。基本语法：ahref=mailto:E-mail地址[?subject=邮件主题[&参数=参数值]]链接内容/a5.3.3电子邮件链接!--程序5-5--htmlheadtitle发送邮件/title/headbodyp这是邮件链接：ahref=mailto:[e-mail]?cc=[e-mail]&subject=你好&bcc=[e-mail]&body=祝你度过快乐的一天！联系我们/a/p/body/html5.3.3电子邮件链接5.3.4FTP链接FTP是一种文件传输协议，它是计算机与计算机之间能够相互通信的语言，通过FTP可以获得Internet上丰富的资源。基本语法：ahref=ftp:/…/链接内容/a5.3.4FTP链接!--程序5-6--htmlheadtitleftp链接/title/headbodyp这是一个FTP链接：ahref=北京大学FTP服务器/a/p/body/html/html5.3.4FTP链接5.3.5下载文件的链接如果希望制作下载文件的链接，只需在链接地址处输入文件所在的位置即可。当浏览器用户单击链接后，浏览器会自动判断文件的类型，以做出不同情况的处理。基本语法：ahref=url链接内容/a5.3.5下载文件的链接!--程序5-7--htmlheadtitle下载文件/title/headbodyp这是一本电子书：ahref=ds.rar数据结构--C#/a/p/body/html5.3.5下载文件的链接5.4图像映射图像映射就是在图像上先划分出不同的区域，然后定义哪个目标与图像的哪个区域对应，但单击图像的某一区域，就会把用户带到一个目标，单击另一区域，又会把用户带到另外的目标。其实，图像映射就是将图像内的区域与一系列URL链接起来了，从而单击特定区域就会把用户带到相应的内容。这里所讲的映射是客户端图像映射，这和服务器端图像映射相比，运行速度要快。5.4图像映射基本语法：imgsrc=URLusemap=id/namemapname=nameid=idareashape=coords=href=URL/map5.4图像映射!--程序5-8--htmlbodypalign=centerimgsrc=images/chmap.jpgwidth=650height=538border=0usemap=#chinaMap/mapname=chinaMapareashape=rectcoords=431,288,487,324href=#zhengzhoualt=郑州areashape=circlecoords=497,196,14href=#beijingalt=北京areashape=circlecoords=560,327,16href=#shanghaialt=上海areashape=polycoords=542,110,629,130,587,169href=#changchunalt=长春/map/pbrbr5.4图像映射h2align=leftaname=zhengzhou郑州/a/h2palign=“left”郑州，河南省省会，是中国重要的内陆开放城市和历史文化名城。郑州历史悠久，文化灿烂，旅游资源丰富。/ph2align=leftaname=beijing北京/a/h2palign=“left”北京中华人民共和国首都。中央直辖市，简称京，是我国第二大超级现代化大都市。北京是我国的政治中心、交通中心、文化中心、科研中心、教育中心。具有较高的国际知名度。/ph2align=leftaname=shanghai上海/a/h2palign=“left”上海是中国第一大城市，世界第八大城市，中国中央四个直辖市之一。有超过2000万人口居住和生活在上海及其附近地区。/ph2align=leftaname=changchun长春/a/h2palign=“left”长春，吉林省省会，全省政治、经济、文化和交通中心，中国最大的汽车工业城市，中国建成区面积和建成区人口第九大城市，东北地区中部最大的中心城市。/p/body/html5.4图像映射a的几种用法总结1.链接网页：ahref=a.htma/a2.链接命名锚点：aname=“pagetop”/a锚点命名处ahref=“#pagetop”链接锚点处/aahref=1.htm#pagetop链接锚点处/a3.链接非Web数据：ahref=my.doc简历/a4.电子邮件链接：ahref=mailto:[e-mail]联系/a5.空链接：ahref=javascript:;a/aahref=“#”空链接/a6.脚本链接：ahref=javascript:alert('哈哈，你好！！');clickme/aahref=“javascript:history.forward()”前进/aahref=“javascript:history.back()”后退/aahref=“javascript:window.close()”关闭/a7.图象热点链接：mapname=mapareashape=coords=href=/map实例：imagesrc=images/qikong.gifwidth=226height=134usemap=#Mapmapname=Mapareashape=rectcoords=220,42,150,74href=images/habahe.gifareashape=circlecoords=180,104,22href=images/girl.jpg/map5.5小实例程序5-9描述了班级网站首页导航条的创建，这里综合运用了链接和样式来设计导航。在head部分中的style标记中，定义了导航条的使用效果(a.head部分)，当访问者鼠标移向每个栏目的名称时，字的颜色都会发生变化，点击栏目名，则进入相应的页面。5.5小实例!--程序5-9--htmlheadtitle班级网站/titlelinkhref=css/style.cssrel=stylesheettype=text/cssmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/headbodytablewidth=940border=0align=centercellpadding=0cellspacing=0background=images/menu-bg.