1.4 图像标记

1.4.1 常用图像格式

网页中图像太大会造成载入速度缓慢，太小又会影响图像的质量，那么哪种图像格式能够让图像更小，却拥有更好的质量呢？接下来将为大家介绍几种常用的图像格式，以及如何选择合适的图像格式应用于网页。

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

1.GIF格式

GIF格式最突出的地方就是它支持动画，同时GIF格式也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。再加上GIF格式支持透明（全透明或全不透明），因此很适合在互联网上使用。但GIF格式只能处理256种颜色。在网页制作中，GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。

2.PNG格式

PNG格式包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF格式，PNG格式最大的优势是体积更小，支持alpha透明（全透明、半透明、全不透明），并且颜色过渡更平滑，但PNG格式不支持动画。同时需要注意的是IE6是可以支持PNG-8的，但在处理PNG-24的透明时会显示为灰色。通常，图片保存为PNG-8会在同等质量下获得比GIF格式更小的体积，而半透明的图片只能使用PNG-24。

3.JPG格式

JPG格式所能显示的颜色比GIF格式和PNG格式要多得多，可以用来保存超过256种颜色的图像，但是JPG格式是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。JPG格式是特别为照片图像设计的文件格式，网页制作过程中类似于照片的图像比如横幅广告（banner）、商品图片、较大的插图等都可以保存为JPG格式。

简而言之，在网页中小图片或网页基本元素如图标、按钮等考虑GIF格式或PNG-8，半透明图像考虑PNG-24，类似照片的图像则考虑JPG格式。

1.4.2 图像标记<img />

HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记<img />及和它相关的属性。其基本语法格式为：





该语法中src属性用于指定图像文件的路径和文件名，它是img标记的必需属性。


要想在网页中灵活地应用图像，仅仅靠src属性是不能够实现的。当然HTML还为<img />标记准备了很多其他的属性，具体如表1-6所示。



 
表1-6 <img />标记的属性




表1-6对<img />标记的常用属性做了简要的描述，下面对它们进行详细讲解。


1．图像的替换文本属性alt


由于一些原因图像可能无法正常显示，比如图片加载错误，浏览器版本过低等。因此为页面上的图像加上替换文本是个很好的习惯，在图像无法显示时告诉用户该图片的信息，这就需要使用图像的alt属性。


下面通过一个案例来演示alt属性的用法，如例1-12所示。


例1-12 example12.html



 
    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>图像标记img的alt属性</title>
    6   </head>
    7   <body>
    8   <img src="logo.gif"alt=
  培训，iOS培训机构"/>
    9   </body>
    10  </html>





例1-12中，在当前HTML网页文件所在的文件夹中放入文件名为logo.gif的图像，并且通过src属性插入图像，通过alt属性指定图像不能显示时的替代文本。


运行例1-12，正常情况下，效果如图1-16所示。如果图像不能显示，在火狐浏览器中就会出现图1-17所示的效果。



 
图1-16 正常显示的图片





 
图1-17 图片不能显示效果




在过去网速比较慢的时候，alt属性主要用于使看不到图像的用户了解图像内容。随着互联网的发展，现在显示不了图像的情况已经很少见了，alt属性又有了新的作用。Google和百度等搜索引擎在收录页面时，会通过alt属性的内容来分析网页的内容。因此，如果在制作网页时，能够为图像都设置清晰明确的替换文本，就可以帮助搜索引擎更好地理解网页内容，从而更有利于搜索引擎的优化。


注意：


各浏览器对alt属性的解析不同，由于Firefox对alt属性支持情况良好，所以这里使用的是Firefox。如果使用其他的浏览器如IE、谷歌等，显示效果可能存在一定的差异。


多学一招：使用title属性设置提示文字


图像标记<img/ >有一个和alt属性十分类似的属性title, title属性用于设置鼠标悬停时图像的提示文字。下面通过一个案例来演示title属性的使用，如例1-13所示。


例1-13 example13.html



 
    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>图像标记img的title属性</title>
    6   </head>
    7   <body>
    8   <img src="logo.gif"alt=
  培训，iOS培训机构" title="传智播客Logo"/>
    9   </body>
    10  </html>





运行例1-13，效果如图1-18所示。


在图1-18所示的页面中，当鼠标移动到图像上时就会出现提示文本。


其实，title属性除了用于图像标记<img/ >外，还常常和超链接标记<a>及表单元素一起使用，以提供输入格式和链接目标的信息。关于超链接标记<a>及表单元素在后面的学习中将会详细讲解。



 
图1-18 图像标记的title属性




2．图像的宽度、高度属性width、height


通常情况下，如果不给<img />标记设置宽和高，图片就会按照它的原始尺寸显示，当然也可以手动更改图片的大小。width和height属性用来定义图片的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示。如果同时设置两个属性，且其比例和原图大小的比例不一致，显示的图像就会变形或失真。


3．图像的边框属性border


默认情况下图像是没有边框的，通过border属性可以为图像添加边框、设置边框的宽度，但边框颜色的调整仅仅通过HTML属性是不能够实现的。


了解了图像的宽度、高度以及边框属性，下面使用这些属性对图像进行一些修饰，如例1-14所示。


例1-14 example14.html



 
    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>图像的宽高和边框属性</title>
    6   </head>
    7   <body>
    8   <img src="logo.gif"alt=
    培训，iOS培训机构" border="2" />
      9   <img src="logo.gif" alt=
    平面培训，iOS培训机构" width="120" />
      10  <img src="logo.gif" alt=
    平面培训，iOS培训机构" width="120" height="100" />
      11  </body>
      12  </html>





在例1-14中，使用了三个<img />标记，对第一个<img />标记设置2像素的边框，对第二个<img />标记仅设置宽度，对第三个<img />标记设置不等比例的宽度和高度。


运行例1-14，效果如图1-19所示。



 
图1-19 图像标记的宽高和边框属性




从图1-19可容易看出，第一个图像显示为原尺寸大小，并添加了边框效果，第二个img标记由于仅设置了宽度按原图像等比例显示，第三个img标记则由于设置了不等比例的宽度和高度导致图片变形了。


4．图像的边距属性vspace和hspace


在网页中，由于排版需要，有时候还需要调整图像的边距。HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。


5．图像的对齐属性align


图文混排是网页中很常见的效果，默认情况下图像的底部会相对于文本的第一行文字对齐。但是在制作网页时经常需要实现其他的图像和文字环绕效果，如图像居左文字居右等，这就需要使用图像的对齐属性align。


下面来实现网页中常见的图像居左文字居右的效果，如例1-15所示。


例1-15 example15.html



 
    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>图像的边距和对齐属性</title>
    6   </head>
    7   <body>
    8   <img src="logo.gif" alt=
  平面培训，iOS培训机构"border="1"hspace="50"vspace="20"align="left"/>
    9   传智播客专业于Java、.NET、PHP、C/C++、网页设计、平面设计、UI设计、iOS培
  训—最专业的培训机构，花一分钱掌握多种技能。改变中国IT教育我们正在行动！
    10  </body>
    11  </html>





在例1-15中，使用hspace和vspace属性为图像设置了水平边距和垂直边距。为了使水平边距和垂直边距的显示效果更加明显，同时给图像添加了1像素的边框，并且使用align="left"使图像左对齐。


运行例1-15，效果如图1-20所示。



 
图1-20 图像标记的边距和对齐属性




注意：


（1）HTML不赞成图像标记<img />使用border、vspace、hspace及align属性，可用CSS样式替代。


（2）网页制作中，装饰性的图像都不要直接插入<img />标记，而是通过CSS设置背景图像来实现。


1.4.3 绝对路径和相对路径


我们都知道，在使用计算机查找需要的文件时，需要知道文件的位置；而表示文件位置的方式就是路径。网页中的路径通常分为绝对路径和相对路径两种。具体介绍如下。


1．绝对路径


绝对路径就是网页上的文件或目录在硬盘上的真正路径，如“D:\HTML5+CSS3\images\logo.gif ”，或完整的网络地址，如“http://www.itcast.cn/images/logo.gif ”。


网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器。这时图像文件可能在服务器的C盘，也有可能在D盘、E盘，可能在aa文件夹中，也有可能在bb文件夹中。也就是说，很有可能不存在“D:\HTML5+CSS3\images\logo.gif ”这样一个路径。


2．相对路径


相对路径就是相对于当前文件的路径，相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。


总结起来，相对路径的设置分为以下3种。
上一章目录下一章