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 >元素是一个内联元素,这说明浏览器不会在图像前后插入一个换行

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值