6.3 设置图像属性
教学录像：光盘\TM\lx\6\设置图像属性．exe
在网页中直接插入图片时，图像的大小和原图是相同的，而在实际应用时可以通过各种图像属性的设置调整图像的大小、分辨率等内容。
6.3.1 图像高度——height
通过height属性可以设置图片显示的高度，默认情况下，改变高度的同时，其宽度也会等比例进行调整。
语法
<img src="图像文件的地址" height=图像的高度>
语法解释
在该语法中，图像的高度单位是像素。
【例6.2】实例代码。（实例位置：光盘\TM\sl\6\2）
<html>
<head>
<title>设置图像高度</title>
</head>
<body>
<h3>编程词典，精彩无限</h3>
 ；编程词典个人版是一套学、查、用为一体的数字化学习编程软件。科学的学习模式、系统的学
习方案，实现快速学习、快速提高，真正做到理论与实践相结合。海量的数据资源，帮助您解决在学习编程语言
中遇到的问题。丰富的实战资源，包括视频、应用范例、模块和项目源码，既能够作为学习的资料，也可以应用
到实战中。
<br />
<!--在该页面中居中插入一张编程词典的图片-->
<center>
<!--默认的图片大小-->
<img src="../images/1.jpg" />
<!--设置图片的高度为160像素-->
<img src="../images/1.jpg" height="160"/>
</center>
</body>
</html>
运行这段代码，可以看到设置了高度的图片大小改变的效果，如图6.2所示。
图6.2 调整图像的高度
6.3.2 图像宽度——width
图像宽度的属性与图像高度类似，同样是用来调整图像大小的。
语法
<img src="图像文件的地址" width=图像的宽度>
语法解释
在该语法中，图像的宽度单位是像素。如果在使用属性的过程中，只设置了高度或宽度，则另一个参数会等比例变化。如果同时设置两个属性，且缩放比例不同的情况下，图像很可能会变形。
【例6.3】下面通过实例说明同时设置两个属性的效果。（实例位置：光盘\TM\sl\6\3）
<html>
<head>
<title>设置图像高度和宽度</title>
</head>
<body>
<h3>编程词典，精彩无限</h3>
 ；编程词典个人版是一套学、查、用为一体的数字化学习编程软件。科学的学习模式、系统的学
习方案，实现快速学习、快速提高，真正做到理论与实践相结合。海量的数据资源，帮助您解决在学习编程语言
中遇到的问题。丰富的实战资源，包括视频、应用范例、模块和项目源码，既能够作为学习的资料，也可以应用
到实战中。
<br />
<!--在该页面中居中插入两张编程词典的图片-->
<center>
<!--设置图片的宽度为160-->
<img src="../images/1.jpg" width="160"/>
<!--同时设置图片的高度和宽度-->
<img src="../images/1.jpg" height="100" width="120"/>
</center>
</body>
</html>
图6.3 设置图像的大小
运行这段代码，可以看到设置了宽度的图片大小改变的效果，如图6.3所示。在该图中，第一张图片只设置了图像的宽度，因此它被等比例缩小。而第二张图片中，同时设置了图片的高度和宽度，而且缩小的比例不同，因此造成了图片被压扁的效果。
6.3.3 图像边框——border
在默认情况下，页面中插入的图像是没有边框的，可以通过border属性为图像添加边框。
语法
<img src="图像文件的地址" border="图像边框的宽度">
语法解释
在该语法中，src是图像文件的地址，是不可缺少的。border的单位是像素。
【例6.4】实例代码。（实例位置：光盘\TM\sl\6\4）
<html>
<head>
<title>设置图像边框</title>
</head>
<body>
<h3>编程词典，精彩无限</h3>
<hr size="2" />
 ；编程词典个人版是一套学、查、用为一体的数字化学习编程软件。科学的学习模式、系统的学
习方案，实现快速学习、快速提高，真正做到理论与实践相结合。海量的数据资源，帮助您解决在学习编程语言
中遇到的问题。丰富的实战资源，包括视频、应用范例、模块和项目源码，既能够作为学习的资料，也可以应用
到实战中。
<br />
<!--在该页面中居中插入两张编程词典的图片-->
<center>
<!--不设置图片的边框的图片-->
<img src="../images/1.jpg" />
<!--同时设置图片的高度和宽度设置图片的边框为3像素-->
<img src="../images/1.jpg" border="3"/>
</center>
</body>
</html>
运行这段代码，效果如图6.4所示。可以看到在右侧图像的周围添加了边框效果，边框的宽度为3像素。
图6.4 设置图像的边框
6.3.4 图像水平间距——hspace
如果不使用<br>标记或者<p>标记进行换行显示，那么添加的图像会紧跟在文字之后。而图像与文字之间的水平距离是可以通过hspace参数进行调整的。通过调整间距，可以使文字和图像的排版不那么拥挤，看上去更加协调。
语法
<img src="图像文件的地址" hspace="水平间距">
语法解释
在该语法中，src是图像文件的地址，是不可缺少的。水平间距hspace属性的单位是像素。
【例6.5】实例代码。（实例位置：光盘\TM\sl\6\5）
<html>
<head>
<title>设置图像的水平间距</title>
</head>
<body>
<h3>请选择您喜欢的头像：</h3>
<hr size="2" />
<!--在页面中居中插入2行图片-->
<!--不设置图片水平间距的效果-->
人物头像<img src="../images/01.jpg" border="2" />
<img src="../images/02.jpg" border="2" />
<img src="../images/03.jpg" border="2" />
<img src="../images/04.jpg" border="2" />
<br /><br />
<!--设置图片的水平间距为20像素-->
另外一组人物头像<img src="../images/8.gif" border="2" hspace="20"/>
<img src="../images/9.gif" border="2" hspace="20"/>
<img src="../images/10.gif" border="2" hspace="20"/>
<img src="../images/11.gif" border="2" hspace="20"/>
</body>
</html>
运行代码的效果如图6.5所示，其中第一组人物头像没有设置水平间距，图片和文字紧紧连在一起；在第二组头像设置了20像素的间距，图像与文字就显得不那么拥挤了。
图6.5 设置图像的水平间距
6.3.5 图像垂直间距——vspace
图像和文字之间的垂直距离也是可以调整的，使用vspace参数就可实现。此功能非常有用，有效地避免了网页上文字图像拥挤的排版。其单位默认为像素。
语法
<img src="图像文件的地址" vspace="垂直间距">
语法解释
在该语法中，vspace属性的单位是像素。
【例6.6】实例代码。（实例位置：光盘\TM\sl\6\6）
<html>
<head>
<title>设置图像的垂直间距</title>
</head>
<body>
<img src="../images/1.jpg" vspace="30" />编程词典个人版是一套学、查、用为一体的数字化学习编程软件。
科学的学习模式、系统的学习方案，实现快速学习、快速提高，真正做到理论与实践相结合。海量的数据资源，
帮助您解决在学习编程语言中遇到的问题。丰富的实战资源，包括视频、应用范例、模块和项目源码，既能够作
为学习的资料，也可以应用到实战中。
</body>
</html>
运行这段代码，效果如图6.6所示，为图像设置了30像素的垂直间距。
图6.6 设置图像的垂直间距
6.3.6 图像相对于文字基准线的对齐方式——align
图像和文字之间的排列通过align参数来调整。图像的绝对对齐方式与相对文字的对齐方式不同，绝对对齐方式包括左对齐、右对齐和居中对齐3种，而相对文字对齐方式则是指图像与一行文字的相对位置。
语法
<img src="图像文件的地址" align="相对文字的对齐方式">
语法解释
在该语法中，align的取值如表6.1所示。
表6.1 图像相对文字的对齐方式
【例6.7】实例代码。（实例位置：光盘\TM\sl\6\7）
<html>
<head>
<title>设置图像与文字的相对位置</title>
</head>
<body>
<font size="+3" color="#FF66CC">玫瑰的生长过程</font>
<!--图像的底端与文字的底端对齐-->
<img src="../images/001.gif" align="bottom" />
<!--图像的中间与文字的中间对齐-->
<img src="../images/002.gif" align="middle" />
<!--图像的顶端与文字的顶端对齐-->
<img src="../images/003.gif" align="texttop" />
<!--图像的中间与文字的中间对齐-->
<img src="../images/004.gif" align="absmiddle" />
<!--图像的底端与文字的底端对齐-->
<img src="../images/005.gif" align="baseline"/>
</body>
</html>
运行这段代码，可以看到在水平线上面是文字与图像的相对垂直位置的变化效果，如图6.7所示。
图6.7 设置图像与文字的相对位置
6.3.7 图像的提示文字——title
通过title属性可以为图像设置提示文字。当浏览网页时，如果图像下载完成，鼠标放在该图像上，鼠标旁边会出现提示文字。也就是说，当鼠标指向图像上方的时候，稍等片刻，可以出现图像的提示性文字，这用于说明或者描述图像。
语法
<img src="图像文件的地址" title="提示文字的内容">
语法解释
在该语法中，提示文字的内容可以是中文，也可以是英文。
【例6.8】实例代码。（实例位置：光盘\TM\sl\6\8）
<html>
<head>
<title>为图像添加提示文字</title>
</head>
<body>
<h3>编程词典个人版简介</h3>
<img src="../images/1.jpg" hspace="20" align="left" title="编程词典个人版，是明日科技的今年主推的产品" />
简介：编程词典个人版是一套学、查、用为一体的数字化学习编程软件。科学的学习模式、系统的学习方案，实
现快速学习、快速提高，真正做到理论与实践相结合。海量的数据资源，帮助您解决在学习编程语言中遇到的问
题。丰富的实战资源，包括视频、应用范例、模块和项目源码，既能够作为学习的资料，也可以应用到实战中。
</body>
</html>
运行这段代码，当鼠标位于图像上面时可以看到添加的说明文字，如图6.8所示。
图6.8 图像的提示文字
6.3.8 图像的替换文字——alt
如果图片由于下载或者路径的问题无法显示，也可以通过alt属性在图片的位置显示定义的替换文字。
语法
<img src="图像文件的地址" alt="替换文字的内容">
语法解释
在该语法中，替换文字的内容可以是中文，也可以是英文。
【例6.9】实例代码。（实例位置：光盘\TM\sl\6\9）
<html>
<head>
<title>为图像添加替换文字</title>
</head>
<body>
<h3>编程词典个人版简介</h3>
<img src="images/1.jpg" hspace="20" align="left" alt="编程词典个人版，是明日科技的今年主推的产品" />简
介：编程词典个人版是一套学、查、用为一体的数字化学习编程软件。科学的学习模式、系统的学习方案，实现
快速学习、快速提高，真正做到理论与实践相结合。海量的数据资源，帮助您解决在学习编程语言中遇到的问题。
丰富的实战资源，包括视频、应用范例、模块和项目源码，既能够作为学习的资料，也可以应用到实战中。
</body>
</html>
运行这段代码，由于图片路径的问题而使图片无法正常显示，因此在图片的位置显示了定义的替换文字，如图6.9所示。
图6.9 图片无法显示时的替换文字