2.17 图片标记.docVIP

2.17 图片标记（常用图像格式、图像标记、相对路径和绝对路径）l 常用图像格式网页中图像太大会造成载入速度缓慢，太小又会影响图像的质量，所以选择合适的图像格式应用于网页很重要。目前网页上常用的图像格式主要有GIF、JPG和PNG三种。 l 图像标记HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记以及和他相关的属性。其基本语法格式如下：该语法中src属性用于指定图像文件的路径和文件名，他是img标记的必需属性。为了使初学者更好地理解和应用这些属性，接下来对他们进行详细地讲解，具体如下： 图像的替换文本属性alt由于一些原因图像可能无法正常显示，比如网速太慢，浏览器版本过低等。因此为页面上的图像加上替换文本是个很好的习惯，在图像无法显示时告诉用户该图片的内容。 图像的宽度、高度属性width、height通常情况下，如果不给标记设置宽和高，图片就会按照他的原始尺寸显示，当然也可以手动更改图片的大小。width和height属性用来定义图片的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示。如果同时设置两个属性，且其比例和原图大小的比例不一致，显示的图像就会变形或失真。 图像的边框属性border默认情况下图像是没有边框的，通过border属性可以为图像添加边框、设置边框的宽度，但边框颜色的调整仅仅通过HTML属性是不能够实现的。了解了图像的宽度、高度以及边框属性，接下来使用这些属性对图像进行一些修饰，主体代码如下所示。运行上述代码，效果如下所示。从上图中容易看出，第一个图像显示为原尺寸大小，并添加了边框效果，第二个img标记由于仅设置了宽度按原图像等比例显示，第三个img标记则由于设置了不等比例的宽度和高度导致图片变形了。 图像的边距属性vspace和 hspace在网页中，由于排版需要，有时候还需要调整图像的边距。HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。 图像的对齐属性align图文混排是网页中很常见的效果，默认情况下图像的底部会相对于文本的第一行文字对齐，如图2-22所示。但是在制作网页时经常需要实现其他的图像和文字环绕效果，例如图像居左文字居右等，这就需要使用图像的对齐属性align。l 相对路径和绝对路径实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。 绝对路径绝对路径一般是指带有盘符的路径或完整的网络地址，例如“D:HTML+CSS网页制作chapter02imglogo.gif”或者“/images/logo.gif”网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器，这时图像文件可能在服务器的C盘，也有可能在D盘、E盘，可能在aa文件夹中，也有可能在bb文件夹中。也就是说，很有可能不存在“D:HTML+CSS网页制作chapter02imglogo.gif”这样一个路径。 相对路径相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。一个网站中通常会用到很多图像，为了方便查找，有时还需要对图像进行分类，即将图像放在不同的文件夹中。例如，如果在img文件夹中新建两个文件夹img01和img02分别用于存放不同类型的图像，图像文件logo.gif位于img01中，如下图所示。这时插入图像的代码如下： 在上面的代码中，“/”用于指定下一级文件夹。建设大型网站时经常需要对网页文件进行分类，上面的例子中如果将HTML网页文件放入HTML文件夹中，此时HTML网页文件的位置如下图所示。图像的位置如下图所示。这时插入图像的代码如下：在上面的代码中，“./”用于指定上一级文件夹。值得一提的是，制作网页时还有一种常见的情况，即图像文件和HTML网页文件同时位于独立的文件夹中，如下图所示，图像文件位于img文件夹，网页文件位于HTML文件夹。这时插入图像的代码如下：总结起来，相对路径的设置分为以下3种：l 图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如。l 图像文件位于html文件的