<img>元素

一、不种格式图片的使用

1.JPEG格式—照片和复杂图像使用

• 适合连续色调图像，例如照片
• 包含颜色丰富多达1600万种不同颜色
• 缩小文件大小会“丢失”图像信息，“有损”格式
• 不支持透明度
• 文件较小，适合WEB高效显示
• 不支持动画

2.PNG或GIF格式—单色图像、LOGO和几何图形使用

• PNG或GIF适合单色图像和线条构成的图像，例如logo、剪贴画和图像中的小文本
• PNG可以包含上百万种不同的颜色的图像。PNG有3种:PNG-8、PNG-24、PNG-32，取决于需要表示多少种颜色。
• GIF可以表示最多256种不同颜色的图像
• PNG和GIF都是“无损”格式。PNG会压缩文件大小，不会丢失图像信息。
• PNG和GIF都支持“透明”，但GIF只支持一种颜色“透明”
• 于相应的JPEG格式的相比，PNG文件更大一些，但也取决使用的颜色数，跟GIF相比可能更小也可能更大。
• GIF往往要比PNG格式的更大一些
• GIF格式支持动画

二、<img>元素

• < img src="图像的相对路径/URL">,<img>是一个void元素。
  <img>是一个内联元素，不换行。
  例子:

< img src="images/drinks.gif" alt=" ">   文件的相对路径
< img src="http://www.coffee.com/drinks.gif">

• 当访问者浏览网页时，图像没有正常显示，可用alt元素描述图像的信息
  alt属性是<img>元素中必要的属性
  例子：

< img src="images/drinks.gif" alt="这是一杯饮料的图片">

效果：

alt效果

• 调整图片的大小
  width属性表示图像在浏览器显示的宽度
  height属性表示图像在浏览器显示的高度
  例子：

< img src="images/drinks.gif" width="50" height="100" alt=" ">

• 当Web页面有大量图片时，则可以创建图片的缩略图作为链接，这样使你的网页加载更快，用户点击缩略图可以查看图片的原图。
  太大的图像对于浏览器，下载和显示都很慢。
  例子：

<a href="html/seattle_video_med.html">
      < img src="thumbnails/seattle_video_med.jpg">
</a>

这样<img>元素的图像放在<a>元素中作为一个链接，图像的链接放在<a>元素中的href属性中。