HTML建立超链接

本章目标Copyright©2010-2012HdwntInc.AllRightsReserved.掌握使用HTML建立超级链接掌握HTML如何设置锚点Copyright©2010-2012HdwntInc.AllRightsReserved.4.1设置基本文字超链接超级链接基础1.理解超链接超链接是由源端点到目标端点的一种跳转。源端点可以是网页中的一段文本或一幅图像等。目标端点可以是任意类型的网络资源，例如可以是一个网页、一幅图像、一首歌曲、一段动画或一个程序等。2.按照目标端点的不同，可以将超链接分为以下几种形式。(1)文件链接：这种链接的目标端点是的一个文件，它可以位于当前网页所在的服务器，也可以位于其他服务器。(2)锚点链接：这种链接的目标端点是网页中的一个位置，通过这种链接可以从当前网页跳转到本页面或其他页面中的指定位置。(3)E-mail链接：通过这种链接可以启动电子邮件客户端程序（如Outlook或FoxMail等），并允许访问者向指定的地址发送邮件。页面链接A标签链接到其他页面Ahref=register/register.html[免费注册]/A链接的地址HTMLHEADTITLE链接到其他页面/TITLE/HEADBODYAhref=register/register.html[免费注册]/AAhref=login/login.htm[登录]/A/BODY/HTML链接内容单击”[免费注册]”之后链接到的页面Copyright©2010-2012HdwntInc.AllRightsReserved.页面链接A标签链接到其他页面相对路径指定从根目录到文件的完整路径。绝对路径指定相对于当前文件的文件位置。在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？两种方式：相对路径和绝对路径Copyright©2010-2012HdwntInc.AllRightsReserved.页面链接A标签要链接到同一目录(C:\HTML)下的页面，可编写AHREF=“Doc1.htm”或AHREF=“C:\html\Doc2.htm”相对路径名绝对路径名Copyright©2010-2012HdwntInc.AllRightsReserved.超链接示例页面链接A标签要实现如下图所示的超链接效果，怎么办？演示示例：演示锚链接的例子使用锚记标签Copyright©2010-2012HdwntInc.AllRightsReserved.页面链接A标签链接到本页面锚记标签用于使用户“跳”到文档的某个部分HTML的NAME属性用于创建锚标记ANAME=“marker”主题名称/A为达到这种跳转效果，请在HREF参数中使用该标记AHREF=“#marker”主题名称/A注意：href属性赋的值若是锚站的name属性值，则必须在书签名前边加一个“#”号。演示示例：演示锚链接的例子HTMLHEADTITLE链接到其他页面/TITLE/HEADBODYAhref=#helpme[新人上路]/A……Aname=helpme新人上路指南/A……/BODY/HTML1、定义锚标记2、链接到锚标记所在位置Copyright©2010-2012HdwntInc.AllRightsReserved.Copyright©2010-2012HdwntInc.AllRightsReserved.命名锚站示例页面链接A标签电子邮件链接要链接电子邮件，可在链接标签中插入”mailto:邮箱地址”Ahref=mailto:[e-mail]站长信箱/A演示示例：演示电子邮件链接HTMLHEADTITLE电子邮件链接/TITLE/HEADBODY……Ahref=mailto:[e-mail]站长信箱/A……/BODY/HTML单击”站长信箱”链接后的输出结果任何正确的电子邮箱地址均可使用图像——创建图片链接a标记其它常用属性TARGET：该属性是可选项，用于指定一个窗口或框架的名称，目标文档将在该窗口或框架中打开。如果省略该属性，则目标文档将取代包含该超链接的文档。TARGET属性的取值既可以是窗口或框架的名称，也可以用“_blank”指定将链接的目标文件加载到未命名的新浏览器窗口中；用“_parent”指定将链接的目标文件加载到包含链接的父框架页或窗口中，如果包含链接的框架不是嵌套的，则链接的目标文件加载到整个浏览器窗口中；用“_self”指定将链接的目标文件加载到链接所在的同一框架或窗口中；用“_top”指定将链接的目标文件加载到整个浏览器窗口中，并由此删除所有框架。TITLE：该属性也是可选项，用于指定指向超链接时所显示的标题文字使用图像——创建图片链接可以为图片设置链接，使其指向其它页面。要设置图片链接，只需要在锚站标记a和/a之间包含img标记，并在锚站标记的href属性中添加要链接到目标文件名称。使用图像——使用缩略图即用一幅文件较小的副本图片来代替原来较大的图片，将其加入到页面中，再在较小的副本图片上创建一个指向原来的大图片的链接。这个副本图片称为“缩略图”。创建图像地图图像地图是图片链接的一种延伸，在一个图像地图中可以设置多个链接，可以连接到什么页面主要取决于使用者点击了图片的哪个部分。在一张图像地图中，整张图片被分成多块活动的区域，这些区域被称为“热点”。用户需要自己定义这些热点，把它们分别链接到各自独立的URI地址。图像地图的基本类型包括两种：客户端图像地图：该地图将直接被浏览器处理服务器端图像地图：该地图将被Web服务器上的一段程序负责解析处理影像地图标记map/map标记形式imgsrc=usemap=#mapnameismapwidth=height=mapname=mapnameareahref=1.htmshape=circlecoords=379,1212,79target=_blanktitle=areahref=2.htmshape=rectcoords=224,159,274,180target=_blanktitle=…/map热点标记（map）属性href属性，用于设定该热点所链接的url地址。shape和coods属性，shape和coords是两个主要的参数，用于设定热点的形状和大小。shape=“rect”，shape=“circle”，shape=poligon图像地图实例滚动MARQUEE标签MARQUEEscrolldelay=“100”direction=“up滚动文字或图像/MARQUEE滚动延迟时间滚动对象的方向说明：scrolldelay：表示滚动延迟时间，默认值为90。direction：表示滚动的方向，默认为从右向左。Copyright©2010-2012HdwntInc.AllRightsReserved.查看源代码滚动MARQUEE标签MARQUEEscrolldelay=100水平滚动/MARQUEEMARQUEEscrolldelay=200direction=up垂直滚动/MARQUEEMARQUEEscrolldelay=300direction=uponmouseover=this.stop()onMouseOut=this.start()Ahref=#IMGsrc=images/scroll/1.gifborder=0align=middleAvon化妆品/ABRAhref=#IMGsrc=images/scroll/2.gifborder=0align=middle雅诗兰黛/ABR……/MARQUEE水平向左移动垂直向上移动图片和文字同时垂直向上移动声明滚动文字结束声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动Copyright©2010-2012HdwntInc.AllRightsReserved.移动的常用属性文字移动方向的设置文字移动方式的设置文字移动循环的设置文字移动速度与延时的设置文字移动底色的设置文字移动面积的设置移动的常用属性DIRECTION属性决定了文字的移动方向：语法:MARQUEEDIRECTION=“”/MARQUEE说明:其中的DIRECTION属性的属性值是取“left”、“right”,”up”,”down”四个值，分别对应将中间的字体向左、右移动移动的常用属性BEHAVIOR属性决定了文字的移动方式：语法:MARQUEEBEHAVIOR=“”/MAEQUEE说明:其中的BEHAVIOR属性的属性值是取“scroll”、“slide”、“alternate”三个值，分别对应将中间的字体循环移动、只移动一次、在屏幕中间来回移动。移动的常用属性LOOP属性决定了文字的移动次数：语法:MARQUEELOOP=“”/MAEQUEE说明:其中的LOOP属性的属性值是取一个数值，表示将中间的字体循环移动的次数。移动的常用属性SCROLLAMOUNT属性决定了文字的移动速度：语法:MARQUEESCROLLAMOUNT=“”/MAEQUEE说明:其中的SCROLLAMOUNT属性的属性值是取数字值，对应将中间的字体循环移动的速度。数值越大，表示速度越快。移动的常用属性SCROLLDELAY属性决定了将中间的字体循环移动的延时。语法:MARQUEESCROLLDELAY=“”/MAEQUEE说明:SCROLLDELAY属性的属性值是取数字值，对应将中间的字体循环移动的延时。设置这个参数也会影响到文字移动的速度。移动的常用属性HEIGHT、WIDTH和BGCOLOR属性分别控制了文字移动面积的高度、宽度和背景颜色。语法:MARQUEEHEIGHT=“”WIDTH＝“”BGCOLOR＝“”/MAEQUEE说明:其中HEIGHT属性的属性值是取数字值，这个属性控制了文字移动面积的高度；WIDTH属性的属性值是取数字值，这个属性控制了文字移动面积的宽度；BGCOLOR属性的属性值可以取RGB值，或者用预定义值，它控制了移动文字的背景颜色。框架之间的链接--p591建立框架与框架集2用COLS属性将窗口分为左右两部分3用ROWS属性将窗口分为上中下三部分4框架的嵌套5用SRC属性在框架中插入网页6用SRC属性在框架之间链接7创建嵌入式框架框架广告栏顶部框架(top.htm)导航栏左侧框架(left.htm)详细内容页面右侧框架(main.htm)框架的边框框架集页面(FrameSet.htm)框架使用场合页面的一个固定部分显示徽标或静态信息在另一个固定部分显示导航部分详细内容在此处显示详细内容，页面中此部分是变化的。framesetcols=“25%,50%,*”rows=“50%,*”border=“5”framesrc=“the_first.html……/frameset框架的基本结构框架页面的基本语法边框尺寸大小将窗口分割成左中右3个部分,可选将窗口分割成上下2个部分,可选第一个窗口要显示的网页框架的基本结构HTMLHEADTITLErows_cols框架/TITLE/HEADFRAMESETrows=25%,50%,*border=5FRAMEname=“topsrc=the_first.htmlFRAMEname=middlesrc=the_second.htmlFRAMEname=“bottomsrc=the_third.html/FR