[综合类] 从HTML语言到网上家园第三章超文本链接

麦迪

超级版主

Rank: 9 Rank: 9 Rank: 9

论坛版主勋章热心会员勋章爱心勋章爱国勋章

发短消息
加为好友
当前离线

楼主大中小发表于 2008-1-26 00:54 只看该作者

从HTML语言到网上家园第三章超文本链接

　超文本链接是 html 语言最大的特点之一，使用超文本链接可以极大的增加文件访问的灵活度，人们可以通过点击页面中的链接指针查看所需的内容，进退自如，灵活方便，这更加符合人的跳跃、交叉的思维方式。凡是浏览过网页的人对此都会有深刻的体会，我们将在本章中介绍关于超级链接的基本知识。打造最好的电脑自学交流论坛; y) _: j2 j6 s- u; ]

　　一个超文本链接指针由两部分组成。一是被指向的目标，它可以是同一文件的另一部分，也可以是互联网上的任何一个文件，目标文件没有限定的格式，可以是网页文件，也可以是动画或音乐等其它格式的文件；另一部分是指向目标的链接指针。   ?# p& r) _/ S' Z- m3 j! b
我爱电脑技术论坛. i/ Y* p2 V2 E2 e0 |4 S
　　3.1 统一资源定位器 URL 打造最好的电脑自学交流论坛, e; x! M6 L1 `: R) e

　　在单机系统中，定位一个文件需要知道存放路径和文件名，而对于遍布全球的互联网，是如何确定一个文件的位置呢？显然我们还需要知道文件存放在哪个网络的哪天主机中才行，此外，联接在网络上的主机是多种多样的，管理主机的操作系统也互不相同，因此必须对整个网络的资源统一定位，这就是统一资源定位器 URL （ uniform Resource Locator ），也就是我们通常所说的网址。 URL 的基本结构为：

　　协议 :// 主机名 [: 端口号 ]/ 目录 / 文件名，
我爱电脑技术社区--打造最好的电脑技术自学交流平台6 n' O/ F; q0 Q' t! D2 O6 y  h
　　其中，协议定义了访问该资源的方法，可以使用的协议有：电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站+ J( q5 U/ @7 B5 m4 @9 {
www.520diannao.com5 _% X1 d% w+ k
　　http 超文本传输协议，该资源是 html 文件

　　file 文件传输协议 , 用 ftp 访问该资源电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站' M9 @& _! O8 O0 L+ P# H; Q$ {
打造最好的电脑自学交流论坛9 S* o5 `% M2 J& Q# e! N1 P7 }
　　ftp 文件传输协议 , 用 ftp 访问该资源我爱电脑技术论坛3 g' L) i) i; Z3 n% I& S! ?, d

　　gopher gopher 协议 , 该资源是 gopher 文件
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站2 O- p. _) M/ q' \  t4 W7 V* Q
　　news 表明该资源是网络新闻

　　主机名是可以是存放该文件的主机的域名，也可以是 IP 地址。端口号是所访问的服务（协议）在目标主机中使用的端口号。一般情况下端口号不需要指定。只有当服务所使用的端口号不是缺省值时才指定。目录和文件名是目标文件的路径和文件名。打造最好的电脑自学交流论坛: ~/ h1 ?- ]! A
) ^% L# O) d( n' O  C) V* l
　　例： http://www.yzsina.com/newscenter/2004-07-13/news_20459.shtml 是一个典型的 URL, 该链接采用 http 协议，主机域名 www.yzsina.com ，文件目录 newscenter/2004-07-13 ，目标文件名为 news_20459.shtml 。
我爱电脑技术论坛6 d- |6 [1 u; r8 [
　　与单机系统绝对路径，相对路径的概念类似，统一资源定位器也有绝对 URL 和相对 URL 之分。上文所述的是绝对 URL 。相对 URL 是相对于你最近访问的 URL 。比如你正在观看一个 URL 为 http://www.yzsina.com/newscenter/2004-07-13/news_20459.shtml 的文件，如果想看同一个目录下的另一个文件 news_20478.shtml ，你可以直接使用 news_20478.shtml ，这时 news_20478.shtmll 就是一个相对 url ，它的绝对 url 为 http://www.yzsina.com/newscenter/2004-07-13/news_20478.shtml 。电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站& K6 X  b. j' n* o3 H9 w5 n0 I/ D* O
3.2 建立链接 # g6 t" W1 `% g0 G* z- D
打造最好的电脑自学交流论坛* z; x7 ]9 U  Q/ X7 T+ i
　　这一节我们将告诉大家如何建立真正的超级链接。超级链接的基本格式是：打造最好的电脑自学交流论坛5 `2 n5 [0 m% |# q' l. s2 e" {* t
www.520diannao.com) u: ~) ^2 h$ Q; Q+ u
　　〈a href=”ULR”〉链接字符串〈/a〉

　　其中 href 属性指定了链接的目标地址，即 URL ；链接字符串即为指向目标的链接指针。如果链接目标在本机， URL 最好采用相对地址。 www.520diannao.com2 c' d) X1 t* V+ g

　　例：建立一个到新浪网主页的链接，在新窗口打开目标主页：
打造最好的电脑自学交流论坛% `+ o. ^- O7 A6 S3 j' u
　　〈a href= "http://www.sina.com.cn" target= "_blank" 〉新浪网〈/a〉

　　除了用字符串作为链接指针外，网页中还经常用图象作为链接指针。图片链接格式为：电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站. l$ S& _+ `8 D6 f/ e3 F

　　〈a href=”ULR”〉〈img src=”URL”〉〈/a〉打造最好的电脑自学交流论坛! d4 g. t9 H! P/ u4 M

　　〈img〉是图象的标记， src 属性指定了图象文件的存储位置。

　　例：建立一个到新浪网主页的链接，在新窗口打开目标主页：

　　〈a href= "http://www.sina.com.cn" 〉〈img border= "0" src= "../images/sina_logo2.gif" width= "118" height= "42" 〉〈/a〉打造最好的电脑自学交流论坛) t: f$ R$ R  z: {% i# z4 g! t# b

3.3 建立书签

　　通常如果一个网页内的文档内容比较长，而我们只需要读取其中的一部分内容，从头至尾浏览查找显然比较麻烦，也浪费时间，我们可以在文档头部建立索引，让索引的链接直接指向相应的内容，在这里就需要用到书签。
打造最好的电脑自学交流论坛/ W: f" ?5 ~1 d) M& o; i
　　书签，其实就是给文档中的一段文字一个标识。标识一个书签的方法为：
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站8 G0 g" i$ z' N
　　〈a name= name 〉链接字符串〈/a〉

　　name 属性为被标记的文档起了一个名字 name ， name 属性的值在整篇文档中是唯一的。链接字符串可以省略。 3 k6 s5 K8 V& ?$ O7 W

　　做好标记之后，我们就可以建立指向该段文档的链接了，方法是：我爱电脑技术社区--打造最好的电脑技术自学交流平台' j6 a6 \" p+ t1 [  d

　　〈a href="url#name"〉链接字符串〈/a〉
www.520diannao.com* d) ~! D7 @' H. {5 W9 C5 P
　　其中， url 是标记所在的文件的地址， name 就是文档的标记。如果链接指针和被标示的文档在同一文件中，则 url 可以省略。

　　例：如果希望很方便地跳转到本章首部，就可以用创建书签的方法实现

　　为本章首部创建标签〈a name=chapter3〉〈/a〉
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站& S% j9 E+ x+ N. [+ r6 N
　　建立到本章首部的链接〈a href=#chapter3〉本章首部〈/a〉
打造最好的电脑自学交流论坛: ?$ ?4 X5 y! R+ ~4 H" p
3.4 目标窗口我爱电脑技术社区--打造最好的电脑技术自学交流平台3 k% H1 ~$ E4 c7 S

　　浏览过网页的人都会发现，当我们点击一个链接的时候，有的目标是在本窗口打开的，也有的是弹出一个新窗口， target 属性的作用就是规定目标文件打开的窗口或者帧。电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站3 b6 L. E0 Q: Z, s6 g! x- v) S

　　Target= window_name | _blank | _parent | _self | _top 打造最好的电脑自学交流论坛2 H. a, H% I7 ?. x# t

　　window_name 用户自定义的目标窗口名称
我爱电脑技术社区--打造最好的电脑技术自学交流平台7 c7 u* V( W) W, A; q
　　_blank 规定把链接连入到一个新的无名窗口上；

　　_parent 规定把链接连入到已经存在链接的中间父文档上；

　　_self 把链接连入已经点击链接的窗口中；电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站# {; _7 }+ Y0 ^  M3 V

　　_top 把链接连入当前窗口中所有实体上。我爱电脑技术论坛/ [2 ^4 t6 r3 S: b' p  z

　　如果不出现于指定目标对应的帧或窗口，则为指定的链接打开一个新窗口。如果没有指定目标，则对同一个站点内的链接，默认值是“ _self ”，如果站点是外部的，则默认值是“ _top ”。 ( P" _4 }+ g' i8 t
3.5 图象地图

　　在本章的开始部分我已经介绍了如何把整幅图像作为链接指针建立超级链接的方法，接下来我们将告诉大家如何在一幅图像上建立多个超级链接。一幅比较大的图片就像一片广阔的土地，我们可以把它划分成多个区域，为每个不同的区域创建不同的联接指针。图像地图的基本格式为：电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站* c, X7 h9 A- D  t: V6 P

　　〈map name= 地图名称〉

　　〈area href=URL shape= 区域形状名称 coords= 坐标值〉

　　…… 我爱电脑技术社区--打造最好的电脑技术自学交流平台/ n) `  V- a2 }# a% g
$ l: H% c5 w$ m2 A8 B0 S, m
　　〈area href=URL shape= 区域形状名称 coords= 坐标值〉我爱电脑技术社区--打造最好的电脑技术自学交流平台" Z3 x9 F% b8 Q. m1 @$ a
www.520diannao.com/ G, {9 ~0 Z/ w1 }/ C2 `) m
　　〈/map〉
' |# F5 v+ q% }( w; t, ^
　　〈img src= 图像 usemap= 地图名称〉

　　其中〈map〉定义了一个区域地图， name 属性规定了所创建图像地图的名称。〈area〉标记的作用是在客户方图像地图中规定超链接区域的形状， href 属性规定了链接的目标地址， shape 属性规定了图像地图中使用的形状类型， coords 属性规定了链接区域的坐标。 shape 属性值有以下几种：

　　circ ， circle 圆形，坐标值取园点坐标和半径长度，
打造最好的电脑自学交流论坛. O* u7 F7 E: p+ W
　　poly ， polygon 多边形，坐标值取多边形各顶点的坐标我爱电脑技术社区--打造最好的电脑技术自学交流平台# b  s* @0 `  q6 G3 O

　　rect ， rectange 矩形，坐标值取左上角和右下角坐标 . g- G2 D& \  j% [6 Z4 }

　　〈img〉标记指定了作为图像的特性， usemap 属性确定了与图片相关链的区域地图。我爱电脑技术社区--打造最好的电脑技术自学交流平台* W. q/ @0 V% J7 N; s
打造最好的电脑自学交流论坛- w5 z/ j2 y. z0 }8 t! w1 D! Z
　　例：电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站1 |& v$ a6 _% ^2 l  C- F
打造最好的电脑自学交流论坛* y& O: d# ?- Y
　　〈map name= "FPMap0" 〉 www.520diannao.com! a& s+ N, O# j
　　〈area href= "http://www.sina.com.cn" shape= "rectangle" coords= "8, 13,196, 166" 〉打造最好的电脑自学交流论坛5 H/ l( b6 P( d6 s# @8 X
　　〈area href= "http://www.163.com" shape= "circ" coords= "438, 111, 75" 〉打造最好的电脑自学交流论坛( q* S8 z; f; B/ l. U/ j* @8 S7 Z
　　〈area href= "http://www.263.net" shape= "polygon" coords= "128, 272,320, 171, 408, 344" 〉 0 |/ y+ [; I4 w1 g2 z8 d. U
　　〈/map〉
　　〈img border= "0" src= "images/11.bmp" usemap= "#FPMap0" width= "551" height= "415" 〉

TOP

‹‹ 上一主题 | 下一主题 ››

[综合类] 从HTML语言到网上家园 第三章 超文本链接

从HTML语言到网上家园 第三章 超文本链接

[综合类] 从HTML语言到网上家园第三章超文本链接

从HTML语言到网上家园第三章超文本链接