我爱电脑技术论坛 » 网站建设 » 从HTML语言到网上家园 第三章 超文本链接

麦迪 发表于 2008-1-26 00:54

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

　超文本链接是 html 语言最大的特点之一，使用超文本链接可以极大的增加文件访问的灵活度，人们可以通过点击页面中的链接指针查看所需的内容，进退自如，灵活方便，这更加符合人的跳跃、交叉的思维方式。凡是浏览过网页的人对此都会有深刻的体会，我们将在本章中介绍关于超级链接的基本知识。 a\ Qf7u_%WL

$YM0m5WnPq 　　一个超文本链接指针由两部分组成。一是被指向的目标，它可以是同一文件的另一部分，也可以是互联网上的任何一个文件，目标文件没有限定的格式，可以是网页文件，也可以是动画或音乐等其它格式的文件；另一部分是指向目标的链接指针。 ^(E3Jn5_'Xs ~"D:M+L

v|-G}3lz 　　3.1 统一资源定位器 URL :x[6])cV5?#r

rt,Li m)D:n@ O 　　在单机系统中，定位一个文件需要知道存放路径和文件名，而对于遍布全球的互联网，是如何确定一个文件的位置呢？显然我们还需要知道文件存放在哪个网络的哪天主机中才行，此外，联接在网络上的主机是多种多样的，管理主机的操作系统也互不相同，因此必须对整个网络的资源统一定位，这就是统一资源定位器 URL （ uniform Resource Locator ），也就是我们通常所说的网址。 URL 的基本结构为： v;_;oRNJ{_$E
IE%we8Jv$q/_ K5r
　　协议 :// 主机名 [: 端口号 ]/ 目录 / 文件名，
'S
X.D){5bY:P'm~
~.Bo7i;p 　　其中，协议定义了访问该资源的方法，可以使用的协议有： ;MKu?5H:BV

6zYR%~/\fNoc 　　http 超文本传输协议，该资源是 html 文件
\*@c$gr0]
3iW8ra([ 　　file 文件传输协议 , 用 ftp 访问该资源 2x5E}B6s(_K%Z*d

2TaM%~|pA3\g}%_ 　　ftp 文件传输协议 , 用 ftp 访问该资源
!j&W!zk"ijBBY1n l
(Ud0~2@ }`(_ 　　gopher gopher 协议 , 该资源是 gopher 文件 k {(eDq4F+b)E4~
6~ jij4Vn,M
　　news 表明该资源是网络新闻
sAF.N])qu$F8|7~ j8}LXz
　　主机名是可以是存放该文件的主机的域名，也可以是 IP 地址。端口号是所访问的服务（协议）在目标主机中使用的端口号。一般情况下端口号不需要指定。只有当服务所使用的端口号不是缺省值时才指定。目录和文件名是目标文件的路径和文件名。
'XI9S[6t%d9GuY+e .Ae:rHH3N(w Q+W
　　例： [url=http://www.yzsina.com/newscenter/2004-07-13/news_20459.shtml]http://www.yzsina.com/newscenter/2004-07-13/news_20459.shtml[/url] 是一个典型的 URL, 该链接采用 http 协议，主机域名 [url=www.yzsina.com]www.yzsina.com[/url] ，文件目录 newscenter/2004-07-13 ，目标文件名为 news_20459.shtml 。
'W,A9W_%Wbug ?4r`
p[gKI9V+t 　　与单机系统绝对路径，相对路径的概念类似，统一资源定位器也有绝对 URL 和相对 URL 之分。上文所述的是绝对 URL 。相对 URL 是相对于你最近访问的 URL 。比如你正在观看一个 URL 为 [url=http://www.yzsina.com/newscenter/2004-07-13/news_20459.shtml]http://www.yzsina.com/newscenter/2004-07-13/news_20459.shtml[/url] 的文件，如果想看同一个目录下的另一个文件 news_20478.shtml ，你可以直接使用 news_20478.shtml ，这时 news_20478.shtmll 就是一个相对 url ，它的绝对 url 为 [url=http://www.yzsina.com/newscenter/2004-07-13/news_20478.shtml]http://www.yzsina.com/newscenter/2004-07-13/news_20478.shtml[/url] 。
QfC
pSSK 3.2 建立链接 l] ~ Zpr.P

TB.u!S|Dtk` 　　这一节我们将告诉大家如何建立真正的超级链接。超级链接的基本格式是： 0d?&oA"y
c6niO

g~1G'\;ia~*L#i1S4\1Y 　　〈a href=”ULR”〉 链接字符串 〈/a〉 6]tjHj

N"_A6M-@
cUJdMs!Ld 　　其中 href 属性指定了链接的目标地址，即 URL ；链接字符串即为指向目标的链接指针。如果链接目标在本机， URL 最好采用相对地址。 6D!Z7E6Ed7?'k

k,dVOC p'Q;N4e 　　例： 建立一个到新浪网主页的链接，在新窗口打开目标主页：
:KbDN7g1C%PD L`df$UR ]
　　〈a href= "http://www.sina.com.cn" target= "_blank" 〉 新浪网 〈/a〉 vH8r k%|kI g5J@%Mo
|'?5l"V:Y+s&BN

&L T
F4P6f&@ 　　除了用字符串作为链接指针外，网页中还经常用图象作为链接指针。图片链接格式为：
O0h1dt*v7d"b qg
l"g*~)i]
　　〈a href=”ULR”〉〈img src=”URL”〉〈/a〉
%J9M(K(WR $\~%?| Jv
　　〈img〉 是图象的标记， src 属性指定了图象文件的存储位置。
K%m%BxwG +{4x
l9c,{
　　例： 建立一个到新浪网主页的链接，在新窗口打开目标主页： )K6\8[|'k K6?+_N
vp9h/TF&u#y!X
　　〈a href= "http://www.sina.com.cn" 〉〈img border= "0" src= "../images/sina_logo2.gif" width= "118" height= "42" 〉〈/a〉 c^d y jo e'K5L

X#_,x(o UB2lm+s 3.3 建立书签
A(f{x0`
Fi2t*Lo
　　通常如果一个网页内的文档内容比较长，而我们只需要读取其中的一部分内容，从头至尾浏览查找显然比较麻烦，也浪费时间，我们可以在文档头部建立索引，让索引的链接直接指向相应的内容，在这里就需要用到书签。 'lqX/\v"I-urYP
R)] W.R
S~9Q
　　书签，其实就是给文档中的一段文字一个标识。标识一个书签的方法为： DX#GE}'gzT8a?
+aLX-`5m q
　　〈a name= name 〉 链接字符串 〈/a〉 t$h1Y!oTf?

*{kZk$_@1jd 　　name 属性为被标记的文档起了一个名字 name ， name 属性的值在整篇文档中是唯一的。链接字符串可以省略。
seSku7H*I8b#T
"cm1c*S/L8L$F7|m)dC
　　做好标记之后，我们就可以建立指向该段文档的链接了，方法是： z+v2`q:ll:C

0^U0? [(@Y#N'XP 　　〈a href="url#name"〉 链接字符串 〈/a〉
q4_ogl I7\,{4d;T:S5E
　　其中， url 是标记所在的文件的地址， name 就是文档的标记。如果链接指针和被标示的文档在同一文件中，则 url 可以省略。
3K R
[,^.^"u5|
9?6hA;i'm6GD 　　例：如果希望很方便地跳转到 本章首部 ，就可以用创建书签的方法实现 -x#tzh4R
Z |ED)G m'\/h
^/h:r5t
　　为本章首部创建标签 〈a name=chapter3〉〈/a〉
9i$E$Tk%o"E'e
W5H&M6i+G0Kz(F 　　建立到本章首部的链接 〈a href=#chapter3〉 本章首部 〈/a〉
(od7Z2cH)~wW
.e(GZ#X{_-e8~ T 3.4 目标窗口
woc{`@ "FGU0f7vTPz:q
　　浏览过网页的人都会发现，当我们点击一个链接的时候，有的目标是在本窗口打开的，也有的是弹出一个新窗口， target 属性的作用就是规定目标文件打开的窗口或者帧。
;b,l-k;`po ;LoB Ob{
　　Target= window_name | _blank | _parent | _self | _top 5N"j
BU IX

Wu~{|:p3VB 　　window_name 用户自定义的目标窗口名称 8a$Ib m&Us/U

5o1nDy7]5} 　　_blank 规定把链接连入到一个新的无名窗口上；
$`)W%?;U I&]K
2A*{ D#GT ] 　　_parent 规定把链接连入到已经存在链接的中间父文档上；
YT2f)xSL
S A`#F]Mn 　　_self 把链接连入已经点击链接的窗口中； 4g5^4` @c)SF
|HD!z dYdL4~
　　_top 把链接连入当前窗口中所有实体上。
J%u O'T)A
J3U{dM%W@bQ 　　如果不出现于指定目标对应的帧或窗口，则为指定的链接打开一个新窗口。如果没有指定目标，则对同一个站点内的链接，默认值是“ _self ”，如果站点是外部的，则默认值是“ _top ”。 z1~:b2D-@:hb w
3.5 图象地图
y
gBQo? 2Sy,G$Y%NQ,I`j v/Q
　　在本章的开始部分我已经介绍了如何把整幅图像作为链接指针建立超级链接的方法，接下来我们将告诉大家如何在一幅图像上建立多个超级链接。一幅比较大的图片就像一片广阔的土地，我们可以把它划分成多个区域，为每个不同的区域创建不同的联接指针。图像地图的基本格式为： s1EF'wZ V9]
t%Oq-g~P
　　〈map name= 地图名称 〉
-dT r8H-nWeJ0h
w!g
No1F+T 　　〈area href=URL shape= 区域形状名称 coords= 坐标值 〉 ir7f2o4M"`f)w]I
s Q%QR(jVV
　　…… `/hqr
hnh]t:l
I@9l#{GwB(}#t&J3K
　　〈area href=URL shape= 区域形状名称 coords= 坐标值 〉
?:e9|A+K#@2M-Q;j ZfF0s~X;kfu0R;l
　　〈/map〉 N7W ly+L4J
U7P'J?mn#jT};c
　　〈img src= 图像 usemap= 地图名称 〉
*o|3vD_K ;r$b1o3v:p#EO
　　其中 〈map〉 定义了一个区域地图， name 属性规定了所创建图像地图的名称。 〈area〉 标记的作用是在客户方图像地图中规定超链接区域的形状， href 属性规定了链接的目标地址， shape 属性规定了图像地图中使用的形状类型， coords 属性规定了链接区域的坐标。 shape 属性值有以下几种： VSA],i/o'r
1la1Qr*Aa
　　circ ， circle 圆形，坐标值取园点坐标和半径长度，
Q,nf%pn?+N` `'|2CC#E2_3?(k%k
　　poly ， polygon 多边形，坐标值取多边形各顶点的坐标
C@}|.q X zji'qjyO
　　rect ， rectange 矩形，坐标值取左上角和右下角坐标 n5M
Y6XyL
[O!dM

]o*u9qt 　　〈img〉 标记指定了作为图像的特性， usemap 属性确定了与图片相关链的区域地图。
JY8ab9Pa,Y kOK*H(oyu
　　例：
*J-o5p+WAM Tc2C*X.iJz d_
　　〈map name= "FPMap0" 〉
2X'g*M8H9P9b'oA
l 　　〈area href= "http://www.sina.com.cn" shape= "rectangle" coords= "8, 13,196, 166" 〉
*sqr)@0T 　　〈area href= "http://www.163.com" shape= "circ" coords= "438, 111, 75" 〉 y1|k4ZJF
　　〈area href= "http://www.263.net" shape= "polygon" coords= "128, 272,320, 171, 408, 344" 〉
^ z1V!qJ'rb&u5\Q9[8As
　　〈/map〉 T0JJ
Ac'?hT
　　〈img border= "0" src= "images/11.bmp" usemap= "#FPMap0" width= "551" height= "415" 〉

查看完整版本: 从HTML语言到网上家园 第三章 超文本链接