HTML和CSS（五）

第五章 给你的网页添加图像——认识媒体

---

目录

第五章 给你的网页添加图像——认识媒体

一、浏览器处理图像

二、元素

三、要点

---

一、浏览器处理图像

当浏览器遇到一个<img>元素，：先接受图像，再在页面上显示

JPEG和GIF的不同：

JPEG	GIF
照片和复杂图像	纯色图像、logo、几何图形
可在连续调次（复制品中有中间层次，如照片）图像中获得最好效果	对于几种纯色组成的图像、线条组成的图像（如logo、剪贴画）和含有小段文字的图像比较合适
可以用1600万种不同的颜色显示图像	用256种颜色显示图像
是一种“有损”格式（文件缩小时会丢失部分图像信息）	“无损”格式，会压缩文件来减小尺寸，但不会丢失任何东西
不支持透明	允许把背景颜色设为透明，图像背景可以穿透显示

二、<img>元素

<img src="images/drinks.gif">

       <img>元素是一个内联元素，前后不会插入换行。

       <img>元素是一个空元素。

       src属性制定了要早起网页上显示的图像文件的位置。

       src属性不止用于相对路径，也可以把URL放到src属性中。

       可以使用alt属性为访问者提供图像信息。（alt是一小段描述图像的文字，如果图像不能显示就用这段文字）

       尺寸：width（宽度）和height（高度）（用像素的数量指定）

              浏览器在缩小大图像来配合网页之前要先下载在整个大图像。

缩略图到大图的链接：

       为图像创建单独的页面

       创建图像的链接（在<a>元素中放置<img>元素）

       （大多数浏览器会在可链接的图像周围加边框）

       （可以直接链接到图像）

三、要点

1. 使用<img>元素在网页中添加图像。
2.  浏览器对待<img>元素不同于其他HTML元素：在读完HTML页面后，浏览器从网络服务器上接收每张图像并显示。
3. 如果网页上有许多大图像，要创建缩略图来使网页更具实用性并更快地下载。用户通过点击小图像来查看大图像。
4. <img>是一个内联元素。
5. src用来指定图像文件的位置。可以用相对路径或URL。
6. alt是对图象意义的描述。如果图像找不到，会在某些浏览器中显示，并被屏幕读取器用于为有视觉障碍的用户描述图像。
7. 宽度小于800像素是网页图像显示的优秀方案。
8. JPEG和GIF是网络浏览器广泛接受的两种图像格式。
9. JPEG适用于照片和其他复杂图形，可以用多种质量等级压缩。
10. GIF适用于logo和其他由纯色、线条或文字组成的简单图像，允许创建一个带透明背景的图像。
11. 图像可以像链接一样链接到其他网页。