网页图片标记
插入图片标记<img>
今天看到的丰富多彩的网页，都是因为有了图像的作用。想一想过去，网络中全部都是纯文本的网页，非常枯燥，就知道图像在网页设计中的重要性了。在html页面中可以插入图像，网页常用的图像格式有JPEG和GIF两种：
JPEG(Joint Photographic Experts Group)是特别为照片图像设计的文件格式。JPEG支持数百万种色彩。JPEG是质量有损耗的格式，这意味着在压缩时一些图像数据被丢失了，这降低了最终文件的质量。然而图像数据被抛弃得很少，不会在质量上有非常明显的不同。
图形交换格式GIF是网页图像中很流行的格式。虽然它仅包括256种色彩，但GIF提供了出色的、几乎没有丢失的的图像压缩。并且GIF可以包含透明区域和多动画。它靠水平扫描像素行找到固定的颜色区域进行压缩，然后减少同一区域中的像素数量。因此GIF 通常适应于卡通、图形、Logo、带有透明区域的图形、动画等。
页面中插入图片可以起到美化的作用。插入图片的标记只有一个，那就是<img>标记。插入图片的时候，仅仅使用<img>标记是不够的，需要配合其它的属性来完成，如下表所示。
插入图片标记<img>的属性
属性 描述
src 图像的源文件
alt 提示文字
width,height 宽度、高度
border 边框
vspace 垂直间距
hspace 水平间距
align 排列
dynsrc 设定avi文件的播放
loop 设定avi文件循环播放次数
loopdelay 设定avi文件循环播放延迟
start 设定avi文件播放方式
lowsrc 设定低分辨率图片
usemap 映象地图
图像的源文件属性src
配合src属性指定图像源文件所在的路径，就可以完成图像的插入了。
基本语法
<img src="images/abc.jpg">
语法解释
通过src属性指定路径，images/abc.jpg为要插入图像的路径。
图像的低分辨率源文件属性lowsrc
如果用户的浏览器速度很慢，网页设计者可以在页面中为其插入一张低分辨率的图像供显示。
基本语法
<img lowsrc=" images/abc.jpg ">
语法解释
通过lowsrc属性指定路径，" images/abc.jpg "为要插入图像的路径。
图像的提示文字属性alt
提示文字有两个作用。当浏览网页时，如果图像下载完成，鼠标放在该图像上，鼠标旁边会出现提示文字。也就是说，当鼠标指向图像上方的时候，稍等片刻，可以出现图像的提示文字，这用于说明或者描述图像。第二个作用是，如果图像没有被下栽，在图像的位置上就会显示提示文字。
基本语法
<img src=" images/abc.jpg " alt="说明提示文字">
语法解释
说明提示文字的内容中英文均可
图像的宽度和高度属性width、height
默认情况下，页面中图像的显示大小就是图片默认的宽度和高度，我们也可以手动更改图片的大小。但是我们建议使用专业的图像编辑软件对图像进行宽度和高度的调整。
基本语法
<img src=" images/abc.jpg " width="value" height="value">
语法解释
图像的宽度和高度的单位可以是像素，也可以是百分比。如果你的显示器是800×600，那你的屏幕就相当于水平方向上有800个像素点的宽度，垂直方向上有600个像素点的宽度。因为网页主要是通过屏幕显示，所以建议编辑者使用像素作为单位。
图像的边框属性border
基本语法
<img src="images/abc.jpg" border="value">
语法解释
value为边框线的宽度，单位为像素。
图像的垂直间距属性vspace
图像和文字之间的距离是可以调整的，这个属性用来调整图像和文字之间的上下距离。此功能非常有用，有效地避免了网页上文字图像拥挤的排版。其单位默认为像素。
基本语法
<img src=" images/abc.jpg " vspace="value">
语法解释
value为图片垂直方向上和文字的距离，单位是像素。
图像的水平间距属性hspace
图像和文字之间的距离是可以调整的，这个属性用来调整图像和文字之间的左右距离。此功能非常有用，有效地避免了网页上文字图像拥挤的排版。其单位默认为像素。
基本语法
<img src=" images/abc.jpg " hspace="value">
语法解释
value为图片水平方向上和文字的距离，单位为像素。
图像的排列属性align
图像和文字之间的排列通过align属性来设定。图像的绝对对齐方式和相对文字对齐方式是不一样的。绝对对齐文字的效果和文字的对齐一样，只有三种：居左、居中、居右；而相对文字对齐方式是指图像与一行文字的相对位置。 "基线"(Baseline)、"底部"(Bottom)、"绝对底部"(Absolute Bottom)效果相同，是指图像底端和文字的底端对齐。
对于中文"顶端"(Top)、"文本上方"(TextTop)方式是指图像顶端和文字行最高字符的顶端对齐。
"中间"(Middle)方式是指图像的中间线和文字的底端对齐。
"绝对中间"(Absolute Middle)是指图像的中间线和文字的中间线对齐。"绝对中间"对齐方式用处比较大，文字前如有小图标，那么图标应该使用"绝对中间"对齐方式。
基本语法
<img src=" images/abc.jpg " align="Top">
<img src=" images/abc.jpg " align="Middle">
<img src=" images/abc.jpg " align="Bottom">
<img src=" images/abc.jpg " align="Left">
<img src=" images/abc.jpg " align="Right">
<img src=" images/abc.jpg " align="Absbottom">
<img src=" images/abc.jpg " align="Absmiddle">
<img src=" images/abc.jpg " align="Baseline">
<img src=" images/abc.jpg " align="Texttop">
图像排列Align属性值
属性值 描述
Top 文字的中间线居在图像上方
Middle 文字的中间线居在图像中间
Bottom 文字的中间线居在图像底部
Left 图片在文字的左部
Right 图片在文字的右部
Absbottom 文字的底线居在图片底部
Absmiddle 文字的底线居在图片中间
Baseline 英文文字基准线对齐
Texttop 英文文字上边线对齐
avi的源文件属性dynsrc
使用<img>标记，可以在网页中插入avi格式的文件。
基本语法
<img dynsrc="abc.avi">
语法解释
通过dynsrc属性指定路径，abc.avi为要插入视频的路径。
设定avi文件循环次数属性loop
通过loop属性可以设置avi文件的循环次数
基本语法
<img dynsrc="abc.avi" loop=value>
语法解释
value的取值可以是数值，也可以为infinite，实现无限次播放。
设定avi属性文件循环延时loopdelay
通过loopdelay属性可以设置影片重复播放所停留的时间
基本语法
<img dynsrc="abc.avi" loop=value loopdelay=timevalue>
语法解释
timevalue的取值以秒数为单位进行设置
设定avi文件播放方式属性start
通过start属性可以设定avi文件的播放方式
基本语法
<img dynsrc="abc.avi" start=value>
avi文件播放方式属性
属性值 描述
Fileopen 网页打开时即播放
Mouseover 当鼠标滑动到AVI文件上方后播放
图片的超链接
图片的链接标记和文字是相同的，都是<a>标记。和文字不同的是，一张图片的链接地址可以是唯一，也可以是多个。
基本语法
<a href="index.jsp"><img src=abc.JPG width="100" height="100" border=0>图片链接</a>
图像映射标记<map>
所谓图像映射是指在一幅图中定义若干个区域，每个区域中指定一个不同的超链接，当单击不同的区域时便可以跳转到相应的目标页面。
基本语法
<map name="name">
<area href=URL1 shape=rect coords="x1,y1,x2,y2">
<area href=URL2 shape=circle coords="x,y,r">
<area href=URL3 shape=poly coords="x1,y1,x2,y2,...,xn,yn">
< map >
语法解释
标记了映射区域之后，就可以通过在IMG标记符中使用usermap属性来引用相应的映射信息。
定义映射区域使用MAP标记符，在<MAP>和</MAP>之间添加映射区域。添加映射区域使用AREA标记符。该标记符具有四个基本属性：
属性 描述
href 标识出目标的URL
shape 说明映射区域的形状。取值可是：rect矩形,circle圆形,poly多边形
default 整个图像区域
coords 用于标识映射区域的边界
703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
