插入图片标记
今天看到的丰富多彩的网页，都是因为有了图像的作用。想一想过去，网络中全部都是纯文本的网页，非常枯燥，就知道图像在网页设计中的重要性了。在html页面中可以插入图像，网页常用的图像格式有JPEG和GIF两种：
JPEG(Joint Photographic Experts Group)是特别为照片图像设计的文件格式。JPEG支持数百万种色彩。JPEG是质量有损耗的格式，这意味着在压缩时一些图像数据被丢失了，这降低了最终文件的质量。然而图像数据被抛弃得很少，不会在质量上有非常明显的不同。
图形交换格式GIF是网页图像中很流行的格式。虽然它仅包括256种色彩，但GIF提供了出色的、几乎没有丢失的的图像压缩。并且GIF可以包含透明区域和多动画。它靠水平扫描像素行找到固定的颜色区域进行压缩，然后减少同一区域中的像素数量。因此GIF 通常适应于卡通、图形、Logo、带有透明区域的图形、动画等。
页面中插入图片可以起到美化的作用。插入图片的标记只有一个，那就是标记。插入图片的时候，仅仅使用标记是不够的，需要配合其它的属性来完成，如下表所示。
属性 描述 src 图像的源文件 alt 提示文字 width,height 宽度、高度 border 边框 vspace 垂直间距 hspace 水平间距 align 排列 dynsrc 设定avi文件的播放 loop 设定avi文件循环播放次数 loopdelay 设定avi文件循环播放延迟 start 设定avi文件播放方式 lowsrc 设定低分辨率图片 usemap 映象地图 图像的源文件属性SRC
配合src属性指定图像源文件所在的路径，就可以完成图像的插入了。

基本语法 %20

语法解释 通过src属性指定路径，https://www.jb51.net/web/File＿name为要插入图像的路径。 文件范例：9-1.htm 通过标记的src属性插入图片。01%2002%2003%2004%2005%2006%2007%2008%2009%2010%20

主流的网页设计软件

11%20
12 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

13
14 文件说明
第11行插入了JPEG格式的图片文件。
图像的低分辨率源文件属性LOWSRC
如果用户的浏览器速度很慢，网页设计者可以在页面中为其插入一张低分辨率的图像供显示。

基本语法 %20

语法解释 通过lowsrc属性指定路径，"File＿nname"为要插入图像的路径。 文件范例：9-2.htm 通过标记的lowsrc属性插入低分辨率图像。01%2002%2003%2004%2005%2006%2007%2008%2009%2010%20

主流的网页设计软件

11%20
12 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

13
14 文件说明
第11行插入了一张低分辨率JPEG格式的图片。
图像的提示文字属性ALT
提示文字有两个作用。当浏览网页时，如果图像下载完成，鼠标放在该图像上，鼠标旁边会出现提示文字。也就是说，当鼠标指向图像上方的时候，稍等片刻，可以出现图像的提示文字，这用于说明或者描述图像。第二个作用是，如果图像没有被下栽，在图像的位置上就会显示提示文字。

基本语法 %20

语法解释 说明提示文字的内容中英文均可。 文件范例：9-3.htm 通过标记的alt属性设定图片的提示文字。01%2002%2003%2004%2005%2006%2007%2008%2009%2010%20

主流的网页设计软件

11%20
12 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

13
14 文字说明
第11行设定了图片的提示文字。
图像的宽度和高度属性WIDTH、HEIGHT
默认情况下，页面中图像的显示大小就是图片默认的宽度和高度，我们也可以手动更改图片的大小。但是我们建议使用专业的图像编辑软件对图像进行宽度和高度的调整。

基本语法 %20

语法解释 图像的宽度和高度的单位可以是像素，也可以是百分比。如果你的显示器是800×600，那你的屏幕就相当于水平方向上有800个像素点的宽度，垂直方向上有600个像素点的宽度。因为网页主要是通过屏幕显示，所以建议编辑者使用像素作为单位。 文件范例：9-4.htm 通过标记的width、height属性设定图片的大小。01%2002%2003%2004%2005%2006%2007%2008%2009%2010%20

主流的网页设计软件

11%20
12
13 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

14
15 文件说明
第11行设定了图片的大小为默认，第12行改变了图片的宽度和高度。
图像的边框属性BORDER
默认的图片是没有边框的，通过属性可以为图像添加边框线。我们可以设置边框线的宽度，但边框的颜色是不可以调整的。当图像上没有添加链接的时候，边框的颜色为黑色；当图像添加了链接时，边框的颜色和链接文字颜色一致，默认为深蓝色。

基本语法 %20

语法解释 value为边框线的宽度，单位为像素。 文件范例：9-5.htm 通过标记的border属性设置图片的边框。01%2002%2003%2004%2005%2006%2007%2008%2009%2010%20

主流的网页设计软件

11%20
12 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Firewrks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

13
14 文件说明
第11行设定了图片的边框为3像素。
图像的垂直间距属性VSPACE
图像和文字之间的距离是可以调整的，这个属性用来调整图像和文字之间的上下距离。此功能非常有用，有效地避免了网页上文字图像拥挤的排版。其单位默认为像素。

基本语法 %20

语法解释 value为图片垂直方向上和文字的距离，单位是像素。 文件范例：9-6.htm 通过标记的vspace属性设定图片的垂直距离。01%2002%2003%2004%2005%2006%2007%2008%2009%2010%20

主流的网页设计软件

11%20
12 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

13
14 文件说明
第11行设定了图片的垂直间距为30像素。
图像的水平间距属性HSPACE
图像和文字之间的距离是可以调整的，这个属性用来调整图像和文字之间的左右距离。此功能非常有用，有效地避免了网页上文字图像拥挤的排版。其单位默认为像素。

基本语法 %20

语法解释 value为图片水平方向上和文字的距离，单位为像素。 文件范例：9-7.htm 通过标记的属性设定图片的水平距离。01%2002%2003%2004%2005%2006%2007%2008%2009%2010%20

主流的网页设计软件

11%20
12 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

13
14 文件说明
第11行设定了图片的水平距离为30像素。
图像的排列属性ALIGN
图像和文字之间的排列通过align属性来设定。图像的绝对对齐方式和相对文字对齐方式是不一样的。绝对对齐文字的效果和文字的对齐一样，只有三种：居左、居中、居右；而相对文字对齐方式是指图像与一行文字的相对位置。 "基线"(Baseline)、"底部"(Bottom)、"绝对底部"(Absolute Bottom)效果相同，是指图像底端和文字的底端对齐。 对于中文"顶端"(Top)、"文本上方"(TextTop)方式是指图像顶端和文字行最高字符的顶端对齐。 "中间"(Middle)方式是指图像的中间线和文字的底端对齐。 "绝对中间"(Absolute Middle)是指图像的中间线和文字的中间线对齐。"绝对中间"对齐方式用处比较大，文字前如有小图标，那么图标应该使用"绝对中间"对齐方式。

基本语法 %20%20%20%20%20%20%20%20%20

语法解释 其中align的属性值如下表所示 %20%20%20%20 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20属性值 %20%20%20%20%20%20%20%20%20%20%20%20描述 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20Top %20%20%20%20%20%20%20%20%20%20%20%20文字的中间线居在图像上方 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20Middle %20%20%20%20%20%20%20%20%20%20%20%20文字的中间线居在图像中间 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20Bottom %20%20%20%20%20%20%20%20%20%20%20%20文字的中间线居在图像底部 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20Left %20%20%20%20%20%20%20%20%20%20%20%20图片在文字的左部 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20Right %20%20%20%20%20%20%20%20%20%20%20%20图片在文字的右部 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20Absbottom %20%20%20%20%20%20%20%20%20%20%20%20文字的底线居在图片底部 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20Absmiddle %20%20%20%20%20%20%20%20%20%20%20%20文字的底线居在图片中间 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20Baseline %20%20%20%20%20%20%20%20%20%20%20%20英文文字基准线对齐 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20Texttop %20%20%20%20%20%20%20%20%20%20%20%20英文文字上边线对齐 %20%20%20%20%20%20%20%20 %20%20%20%20 文件范例：9-8.htm 通过标记的align属性设定图片的排列。01%20020304050607080910

主流的网页设计软件

11
12 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

13

---

14
15 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

16

---

17
18 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

19
20 文件说明
第11、14、17行分别设定了图片的排列为居左、居右和文字居中。