我们今天所看到的网页,越来越丰富多彩,是因为添加了各种各样的图像,对于网页进行了美化。当前万维网上流行的图像格式有: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=“”>