第9课：图像

第9课：图像

假如能把影歌两栖传奇人物David Hasselhoff的图像放到自己的网页上，那就太好了。

这貌似有点难度。。。

也许是有点难度，但其实也不难，一个元素就可以搞定：

例1：

<img src="david.jpg" alt="David" />

该例在浏览器中将显示如下：

你要做的只是：首先告诉浏览器你要插入一张图片（img），接着给出这张图片的存放位置（src，代表“来源（source）”）就行了。准备好图片了吗？

注意：img元素没有尾标签，它与<br />一样，不与特定的文本相关。

“david.jpg”是要插入的图片的文件名，其中的“jpg”表明图片类型。就像后缀名“htm”代表文件是HTML文档一样，后缀名“jpg”表明文件是一个图片文件。有三种类型的图片文件可被插入网页中：

• GIF（Graphics Interchange Format，图形交换格式）
• JPG或JPEG（Joint Photographic Experts Group，联合图像专家组）
• PNG（Portable Network Graphics，可移植网络图像）

一般来说，GIP是图形和图画的最佳格式，而JPEG格式则更适合存放照片。原因有二：第一，GIF格式只支持256色，而JPEG格式支持数百万色；第二，GIF格式擅长于压缩简单图像，而JPEG则更适于压缩复杂图像。压缩率越高，图像文件就越小，页面加载速度就越快。也许你也有同感，包含太多无用内容的网页是很不受欢迎的。

过去，GIF和JPEG是两大主要的图像格式，但是最近PNG格式也开始流行起来（主要是在取代GIF格式）。PNG格式拥有许多JPEG与GIF的共同优点：支持数百万色，且压缩效果好。

图片从何处获得？

要制作自己的图像，需要有一个图像编辑程序。图像编辑程序是从事美观的网页制作所需的重要工具之一。

不幸的是Windows或其他操作系统都没有自带比较好的图片编辑程序。所以，也许你得买一个Paint Shop Pro、PhotoShop或者Macromedia Fireworks，这三个是目前市场上最好的图像编辑软件。

不过还是那句话，完成本教程的学习不需要购买任何昂贵的软件。你可以先下载一个Irfan View用，这是一个很不错的图像编辑软件。因为是自由软件，所以你可以免费使用它。

或者，你也可以从我们HTML.net网站下载一些图片来用，但请注意不要违反有关版权规定。具体下载方法如下：

1. 右击网页中的图像。
2. 在菜单中选择“图片另存为...”。
3. 选择图片的存放位置，然后点击“保存”。

按此方法将下面的图片保存到你的HTML文档所在目录。（注意：将它保存为PNG文件，文件名为logo.png）：

现在你可以把这个图片插入到自己的网页里。自己试试看。

关于图像就这么多吗？

关于图像，还有一些是需要介绍的。

首先，你可以轻易地把存放在其他文件夹、甚至其他网站的的图片插入到自己的网页中。

例2：

<img src="Upload/images/20000-20999/20846/e91b3-small.jpg">

例3：

<img src="/newsfile/4000-4999/4723/070926132670380.jpg">

其次，图片也可以作为链接：

例4：

<a href="http://down.phpstudy.net">
<img src="Upload/images/20000-20999/20846/e91b3-small.jpg"></a>

该例在浏览器中将显示如下（你可以试试看点击这个图像）：

有什么属性需要了解的吗？

你总要用src属性来告诉浏览器图片的存放位置。除此以外，还有一些有用的属性。

alt属性用于给出图像的替用描述，假如由于某些原因该图像未能显示出来，浏览器就通过显示这个描述来替代图像。对于有视力障碍的人士来说，或者当网页打开很慢的时候，这一特性显得尤为重要。所以说，始终记得写alt属性：

例5：

<img src="logo.gif" alt="phpstudy.net logo">

有些浏览器会在鼠标光标移到图像上时显示出alt属性的文本。但是，在使用alt属性时请注意，该属性的目的是为图片提供一个替用描述，有视力障碍的人士会利用alt属性来听取有关图片的描述，所以不要将该属性用于显示文本提示——那是title属性的功能。

例7：

<img src="logo.png" width="141" height="32">

该例在浏览器中将显示如下：

width和height属性分别用于设置图像的宽度和高度，以像素为单位。像素（pixel）是用于测量屏幕分辨率的计量单位。（目前大多数屏幕分辨率是1024×768或更高）。像素跟公分不同，像素是一种相对计量单位，一个像素的实际大小跟屏幕分辨率有关。在高分辨率显示模式下，差不多25个像素等于1公分；而在低分辨率显示模式下，同样的25个像素大约等于1.5公分。

如果你没有为图像设置宽度和高度，它将按原始尺寸显示。但是如果设置了的话，你就可以控制它的显示尺寸：

例8：

<img src="logo.gif" width="32" height="32">

该例在浏览器中将显示如下：

但是值得注意的是，虽然可以通过设置高度和宽度来控制图片的显示尺寸，但图片文件的实际大小不会因此而发生变化。所以，不要指望通过设置图片的宽度和高度来减小图片文件的大小。相反，你应该在图像编辑程序中来调整图片文件的大小，以加快页面加载速度。

不过width和height属性还是有用的，它们可以在图片被完全下载之前令浏览器知道该用多大的空间来显示图片。这令浏览器可以更快显示出美观的页面。

关于图像就说这么多了。

例6：

<img src="logo.gif" title="上phpstudy.net网站学习HTML">

该例在浏览器中将显示如下：

如果你把鼠标光标停留在该图片上（别点击它），提示文字“上phpstudy.net网站学习HTML”便会出现。

另外两个重要的属性是width和height：