Head First HTML与CSS part5

为页面增加图画

三种格式的图像

照片和复杂图像使用JPEG

• 最适合连续色调图像如照片
• 可以表示多达1600万种不同颜色的图像
• 这是一种“有损”格式，因为缩小文件大小时会丢失一些文件信息
• 不支持透明度
• 文件比较小，以便web页面更加高效地显示
• 不支持动画

单色图像，logo或者几何图像使用PNG或者GIF

PNG

• 最适合单色图像和线条构成地图像（如logo、剪贴画和图像中的小文本）
• 可以包含上百万种不同颜色的图像。PNG有三种，PNG-8，PNG-24和PNG-32取决你需要多少颜色
• PNG压缩文件来缩小文件大小，不过不会丢失信息，所以这是一种“无损”格式
• 允许将图像颜色设置为透明，使图像下面的东西可以显现出来
• 与相应的JPEG文件相比，PNG文件更大一些，不过取决于使用的颜色数。可能比相应的GIF文件小一些，也有可能更大一些

GIF

• 类似于PNG，最适合单色图像或者线条构成的图像（如logo、剪切画和图像中的小文本）
• GIF最多表现256种不同的颜色
• GIF也是一种无损格式
• GIF也支持设置透明度，不过只支持将一种颜色设置为透明
• GIF往往比相应的JPEG文件大
• 支持动画

< img >元素拓展

< img >元素的src属性不只是用于相对链接，也可以在src属性中放入URL

alt属性

可以为访问者提供一些信息，告诉图像中的信息.如何图像未显示就会使用alt中的文本来代替它

<img src="http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png" alt="The typical new pencil can draw a line 35 miles long.">

width和height属性

用以指定页面的宽度和高度，宽度和高度都使用像素数指定的。如果没有指定图像的大小，则浏览器在页面中显示图像之前会自动确定图像大小。如果只指定宽度或者高度，则按照之前的长宽比缩放。

缩略图

如果web页面含有多个大的图像，可以使用缩略图，通过点击缩略图链接到更大比例的图片
图像可以作为指向其他页面的链接。要有图像创建一个链接，可以使用< img >元素作为< a >元素的内容，将链接放在< a >元素的href属性中
可以建立歌html文件夹在文件夹中创建与照片同名的html文件，在这个html文件中可以添加一些上下文信息和图片
例如，有一张名为lin的图片，我们已经得到了其缩略图，名为slin.jpg.

<a href="html/lin.html"><img src="slin.jpg"></a>

当然也可以直接链接到更大比例的图片(但这不是一个好的做法，因为一般需要为图片提供一些上下文）

<a href="lin.jpgl"><img src="slin.jpg"></a>

补充

如果要把一个透明图像（如logo）放在web页面中，则要确保这个图像的蒙版颜色与web页面的背景颜色一致。透明图像可以使用PNG或GIF
< img >元素是一个内联元素，这说明浏览器不会在图像前后插入一个换行