3.2 设置图像属性
3.2.1 图像大小与边框
在网页中直接插入图片时，图像的大小和原图的大小是相同的，而在实际应用时，则可以通过对各种图像属性进行设置来调整图像的大小、边框等。
1. 调整图像大小
在<img>标签中，通过height属性和width属性可以设置图像的高度和宽度，其语法格式如下：
其中，height用于设置图像的高度，单位是像素，可以省略；width用于设置图像的宽度，单位是像素，也可以省略。
学习笔记
在设置图像大小时，如果只设置了高度或宽度，则另一个参数会按照相同比例进行调整。如果同时设置两个属性，且在缩放比例不同的情况下，那么图像很可能变形。
2. 设置图像边框——border
默认情况下在网页中插入的图像是没有边框的，但是可以通过border属性为图像添加边框，其语法格式如下：
其中，border用于设置图像边框的大小，单位是像素。
下面通过一个实例，在商品详情网页中添加两张手机图片，其中一张设置宽度和高度为350像素，另一张设置宽度和高度为50像素，并为其添加边框，边宽大小为2像素，代码如下：
编辑完代码后，在浏览器中运行，网页效果如图3.2所示。
图3.2 设置图像的边框
学习笔记
上述程序运用了<div>标签，<div>标签是HTML中一种常用的块级元素，使用它可以在CSS中方便地设置图像的宽、高，以及内、外边距等样式。另外，本实例还运用CSS给网页添加了背景图像、设置网页内容居中，关于CSS的具体知识会在第4章进行介绍，本实例的具体CSS代码请参照配套资源中的源码。
3.2.2 图像间距与对齐方式
HTML5不仅可以在网页中添加图像，还可以调整图像在网页中的间距和对齐方式，从而改变图像的位置。
1. 调整图像间距
如果不使用<br>标签或<p>标签进行换行显示，那么添加的图像会紧跟在文字之后。可以通过hspace和vspace属性来调整图像与文字之间的距离，使图像与文字的排版更加协调，其语法格式如下：
其中，hspace用于设置图像的水平间距，单位是像素，可以省略；vspace用于设置图像的垂直间距，单位是像素，也可以省略。
2. 设置图像相对于文字基准线的对齐方式
图像和文字之间的排列通过align参数来调整，其对齐方式可分为两类，即绝对对齐方式和相对文字对齐方式。绝对对齐方式包括左对齐、右对齐和居中对齐3种，相对文字对齐方式是指图像与一行文字的相对位置。相对文字对齐方式的语法格式如下：
在该语法中，align的取值及含义如表3.1所示。
表3.1 图像相对文字的对齐方式
下面通过一个实例，在头像选择网页插入两行供选择的头像图片，并设置图像与同行文字中部对齐。具体代码如下：
编辑完代码后，在浏览器中运行，网页效果如图3.3所示。
图3.3 设置图像与同行文字的中部对齐
3.2.3 替换文本与提示文字
在HTML中，可以通过为图像设置替换文本和提示文字来添加提示信息，其中，提示文字是当鼠标悬停在图像上时显示；替换文本是在图像无法正常显示时显示，用以告知用户这是一张什么图片。
1. 添加图像的提示文字——title
通过title属性可以为图像设置提示文字。当浏览网页时，如果图像下载完成，那么当将鼠标指针放在该图像上时，鼠标指针旁边会出现提示文字。也就是说，当鼠标指针指向图像上方时，可以出现图像的提示文字，用于说明或描述图像，其语法格式如下：
其中，title后面的双引号中的内容为图像的提示文字。
2. 添加图像的替换文本——alt
在图像由于下载或路径问题无法显示时，可以通过alt属性在图像的位置显示定义的替换文本，其语法格式如下：
其中，alt后面的双引号中的内容为图像的替换文本。
学习笔记
在上面的语法中，提示文字和替换文本的内容可以是中文，也可以是英文。
下面通过一个实例，在五子棋游戏简介网页中，为图像添加提示文字与替换文本。具体代码如下：
编辑完代码后，在浏览器中运行，网页效果如图3.4所示，其中左边图像由于格式错误，无法正常显示，因此图像位置显示替换文本“游戏大厅”；而当将鼠标指针放置在右边图像上时，会显示提示文字。
图3.4 设置图像提示文字和替换文本