HTML示例07---图像与超链接

我们今天所看到的网页，越来越丰富多彩，是因为添加了各种各样的图像，对于网页进行了美化。当前万维网上流行的图像格式有：GIF、JPEG及PNG等，各自的特点可自行百度。

1.添加图像

语法：

<img src="图像文件的地址"/> 

2.图像大小与边框

在网页中直接插入图片时，图像的大小和原图是相同的，而在实际应用时可以通过各种图像属性的设置调整图像的大小、分辨率等内容。

（1）调整图像大小

语法：

<img src="图像文件的地址" height="" width=""/>

说明：height---用于设置图像的高度，单位是像素，可以省略。

           width---用于设置图像的宽度，单位是像素，可以省略。

在设置图片大小时，如果只设置了高度和宽度，则另一个参数会按照相同比例进行调整。如果同时设置两个属性，且缩放比例不同的情况下，图像可能会变形。

（2）设置图像边框---border

在默认情况下，页面中插入的图像是咩有边框的，但是可以通过border属性为图像添加边框。其语法格式如下：

<img src="图像文件的地址" border=“”>

说明：border参数为对应的数值，不同的数值代表不同的边框宽度。           

3.图像间距与对齐方式

HTML5不仅可以用于添加图像的标记，而且还可以使用标记中的属性调整图像在页面中的间距和对齐方式，从而改变图像的位置。

（1）调整图像间距

如果不使用<br>标记或者<p>标记进行换行处理，那么添加的图像会紧跟在文字之后。但是通过hspace属性和vspace属性可以调整图像与文字之间的距离，使文字和图像的排版不那么拥挤，看上去会更协调，其语法格式为：

<img src="图像文件的地址" hspace="" vspace=""/>

说明：hspace---用于设置图像文件的水平间距，单位是像素，可以省略。

           vspace---用于设置图像的垂直间距，单位是像素，可以省略。

（2）设置图像相对于文字基准线的对齐方式

图像与文字之间排列通过align参数来调整。其对齐方式可分为两类，即绝对对齐方式和相对对齐方式，绝对对齐方式包括左对齐、右对齐和居中对齐3种，而相对文字对齐方式则是指图像与另一行文字的相对位置。其语法格式如下：

<img src="图像文件的地址" align=“相对文件的对齐方式”/>

说明：align参数有很多，比如：top、middle、left、right等，具体的用法可自行百度。

4.替换文本与提示文字

在HTML中，可以通过为图像设置替换文本和提示文字添加提示信息，其中，提示文字在鼠标悬停在图像上时显示，而替换文本是在图像无法正常显示时显示。用以告知用户这是一张什么图片。

（1）添加图像的提示文字---title

通过title属性可以为图像设置提示文字。当流浪网页时，如果图像下载完成，鼠标放在该图像上，鼠标旁边就会出现提示文字。也就是说，当鼠标指向图像上方时，稍等片刻，可以出现图像的提示性文字，用于说明或者描述图像。其语法为：

<img src="图像文件的地址" title=“”>

（2）添加图像的替换文字---alt

如果图片由于下载或者路径的问题无法显示时，可以通过alt属性在图片的位置显示定义的替换文字。其语法格式如下：

<img src="图像文件的地址" alt=“”>