HTML学习笔记（5）——HTML对图片的控制

从本篇开始，博客标题将带上主题，以方便查阅。今天主要学习HTML对图片的控制。51Testing软件测试网r&rBYVA.v(H
51Testing软件测试网p s@e#]y
HTML对图片的控制
Sh5t8z0X!y6S |`b:j0
W5vNW!Tp'E1F0基本语法:
2iS#H:x4B!y0<img src=“图片名称”>51Testing软件测试网~`&|jA)D
引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址51Testing软件测试网 b%P(x4J.zep
51Testing软件测试网4mTbEk2{n
。
&N"[a:xGe%W5d0src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址
n{9]'tI0
|Sj3_1W:I)O$y0所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本
&[2y%l&XQ@x-["B051Testing软件测试网mx^ I7K!x,~
。51Testing软件测试网
o(QJF%F"euS
定义图片替代文本的方法是：51Testing软件测试网A,dK0]s gv
<img src=“图片名称” alt=“这是一张图片”>51Testing软件测试网3Sx"\!oa`5T

,@ C#I4F^bE0图片的显示大小51Testing软件测试网+m/\)|@3[[H z
我们可以指定一幅图片在浏览器窗口里的显示大小。51Testing软件测试网+x O!Xa.jV
定义图片的显示大小的方法是：
P2TDd5A4{-j[0<img src="sample.jpg" width=100 height=100 >51Testing软件测试网&h mhEO[o E*y
width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。
3f~.b+s;v#b6s#f0
Oz+INjT$OrX0图片的边框
aFI}F
Ar9V!Y$U(a0我们可以为一幅图片加一个边框以突出显示：
/R]rV S`;z0 <img src="sample.jpg" border=2 >51Testing软件测试网YZf w&uG'Ls&C:dw$U
border的属性值为象素数51Testing软件测试网:i/WrQ?W Id

W X2KdE8wh|`0图片的对齐方式51Testing软件测试网6G/K6Pv,b
图片可以相对于页面或单元格有一个对齐方式。
]X"I
E;z)U3TcUrm0定义水平对齐方式的方法是：51Testing软件测试网]+cH+f:LW6J
<img src=“sample.jpg” align=“left” >51Testing软件测试网F(x3G/]:b*H$y
<img rc=“sample.jpg” align=“right”>
-WdX,O8cQ.|E0
H3\[HJ l4_0图象映射   51Testing软件测试网V mgQ!W@*m4x
所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目
JnGa;co?051Testing软件测试网E7z!s\u_
标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。51Testing软件测试网 Bmf,I$uAmJ
图象映射（只要求理解标记含义）51Testing软件测试网6Y5aR
es`7H D
图象映射由<map>定义。<map>有一个基本属性是name。Name给图象映射命名，这个命名将会被<img>元素用usemap
9`!Vl-G#k$L!{0
J#g@,T8q&E(v U]0属性引用。所以，图象上的图象映射实际上是对<map>定义的映射的一个引用。51Testing软件测试网T;dJ1O$]_9o{
<map>在定义图象映射时，可以定义三种形状的映射： circle(圆形)、rect(矩形rectangle)、poly(多边形)
&@Rf Se%j1H.}"}0图象映射实例51Testing软件测试网.]7p,P%f1rZ-I3K
<img src="bear.jpg" usemap="#Map" >
V!IJM)AMk0<map name=“Map">
QHV#y)Y$l NG4M'p0<area shape="rect" coords="46,29,253,164" href="#" >51Testing软件测试网'y z%gs8D*|{
<area shape="circle" coords="76,510,59" href="#" >51Testing软件测试网}
k]iL
<area shape="poly" coords="219,482,253,448,310,462,297,527,220,523" href="#" >51Testing软件测试网^7T-S
r$yX*R$m
</map>
S6{`6w,g~0S0
u+p*tk?jql051Testing软件测试网X2q3?g-_q!t
图片的对齐方式
InU2y;Q-xv3t0定义图片的垂直对齐方式：
)EX7P.u'Q9pdrE0<img src="sample.jpg" align="top" >51Testing软件测试网eth9PA:w]
<img src="sample.jpg" align="middle">51Testing软件测试网1a4D`$YCO
<img src="sample.jpg" align="bottom" >51Testing软件测试网+n)v F6A6T
对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。
:~x
z!}j9g051Testing软件测试网*Z0Y!W4~7i1lR
定义图片与左、右的文本之间的间距
7V*xcL2^!l#R | ?JH0图片在显示时，与左右的文本之间可以有一定的间距
q$Dl;i^!y(KD0 <img src="sample.jpg" hspace=5 vspace=5 >
.t-bAp~ []
L6s B$T5u0Hspace(horizontal)定义水平间距； Vspace(vertical)定义垂直间距。单位都是象素数.51Testing软件测试网ca?[x3g

%s%kPF0ck5nZ6r0图象的超级链接
{+{$p8w~x*[T0图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接51Testing软件测试网d)o#uJW

{^F9C%g ?5a;m0的方法是：51Testing软件测试网2X8[W p/kY4e
<a href=“http://www.enet.com.cn/eschool”><img src="sample.jpg" ></a>
})f7d,q&g)zi`0所以，所谓超级链接实际上就是用<a>元素标志一个图象的引用;51Testing软件测试网!@"hu.o$skq*eB

0u1[0RJG WUX`051Testing软件测试网6A4HvX;M9SMW
S/|
51Testing软件测试网Kx;] fP
51Testing软件测试网[3Rv%Kz M