第5章 图像<img>

一、添加图片

<img>元素必须包含两个特性：

（1）src指定图片URL

（2）alt指定图片无法查看时显示的描述文本。

如：<img src="images/quokka.jpg" alt="A family of quokka"  title="短尾矮袋鼠是最小的袋鼠之一，体高不到60厘米。它们大多生活在澳大利亚西南海岸外的洛特尼斯岛。"  />

另外<1>、title特性可以当用户鼠标悬停图片上时显示出提示文本。

　　<2>、控制图片的样式（包括宽高、对齐）我们一般使用CSS来控制。

 

二、块级元素和内联元素

块级元素总是另起一行显示。例如，<h1>、<p>、<div>等都是块级元素。

内联元素位于块级元素中，并且不会另起一行显示。例如<b> <em> <img>等。

 

三、创建网页图片的三条规则

一般使用Photoshop、Firework等工具创建和编辑图片。在图片创建和保存时应该注意下面三条规则：

1、使用正确的格式保存图片

　　照片最好保存为jpeg格式，单色的插图或logo最好保存为gif或png格式。

2、以正确的大小保存图片

　　应该根据图片在网页上显示的大小来创建和保存图片。。

3、以像素衡量图片

　　屏幕分辨率是指每英寸的屏幕上所容纳的像素数。

 

 

四、HTML5增加的图片和图片说明

 HTML5引入新元素<figure>用来包含图片以及对图片的说明，并且这两项是相关联的。只要图片说明是相同的，可以在<figure>元素中添加多个图片。如：