网页设计基础——02图像标记

HTML图像标记

目前网上常用的图像格式主要有GIF、JPG和PNG三种。下面要说一下具体的区别如下：

• GIF格式GIF格式最突出的地方就是它支持动画，同时GIF格式也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎是没有损失的。再加上GIF格式支持透明（全透明或者不透明），因此很适合在互联网上使用。但是GIF格式智能处理256种颜色。在网页制作中，GIF格式长用于Logo、小图标以及其他色彩相对单一的图像。
• PNG格式PNG格式包括PNG-8和真色彩PNG(PNG-24和PNG-32)。相对于GIF格式，PNG格式最大的优势是体积更小，支持alpha透明（全透明、半透明、全不透明），并且颜色过渡更平滑，但是PNG格式不支持动画。同时需要注意的是IE6是可以支持PNG-8的，但是在处理PNG-24的透明时会显示为灰色。通常，图片保存为PNG-8会在同等平直下获得比GIF格式更小的体积，而半透明的图片只能使用PNG-24。
• JPG格式 JPG格式所能显示的颜色比GIF格式和PNG格式要多的多，可以用来保存超过256种颜色的图像，但是JPG格式是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。JPG格式是特别为照片图像设计的文件格式。网页制作过程中类似于招聘的图像比如横幅广告（banner）、商品图片、较大的插图等都可以保存为JPG格式。
  简而言之，在网页中小图片或者是网页基本元素如图标、按钮等考虑GIF格式或者是PNG-8，半透明图像考虑PNG-24，类似照片的图像则考虑JPG格式。

语法格式

其基本的语法格式为：<img src=“图像 URL"/>
该语法中src属性用于制定图像文件的路径和文件名，它是img标记的必须属性。

img属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示的时候替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度
vspace	像素	设置图像顶部和底部的空白（垂直边距）
hapace	像素	设置图像左侧和右侧的空白（水平边距）
align	left	将图像对齐到左边
align	right	将图像对齐到右边
align	top	将图像的顶端和文本的第一行文字对齐，其他文字居图像下方
align	middle	将图像的水平中线和文本的第一行文本字对齐，其他文字居图像下方
align	bottom	将图像的底部和文本的第一行文字对齐，其他的文字居图像的下方

绝对路径

绝对路径一般是指带有盘符的路径，或者完整的网络地址

相对路径

相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置
分以下三种：

• 图像文件和html文件位于同一文件夹：< img src=“logo.gif” />
• 图像文件位于html文件的下一级文件夹：< img src=“新建文件夹/logo.gif” />
• 图像文件位于html文件的上一级文件夹：< img src="…/logo.gif" />