第5章　图像

图像在网页中的应用很广泛，新闻中有图片新闻，其中的相片就用到在网页中放置图像的结果。同理，随着数码相机的普及，网上免费的相册越来越多，故免费相册中的相片也用到图像标记把相片在网页中显示出来。在一张网页中，可以显示不同大小的图片，提供给用户浏览，同时，再给它加一个链接地址就成了图像链接，为了体现图像的效果，也可以给出图片的边框，现实生活中称为相框等，所以本章学习图像标记，其标记用＜img＞表示，学完后会掌握以下内容：

❑图像的基本语法；

❑图像与文字对齐；

❑边框处理；

❑图像的超链接；

❑图像客户端映射图。

5.1　图像的基本语法

本节学习图像的基本语法，在网页中放入图像很简单，只须在＜body＞＜/body＞标记对中插入图像标记＜img＞，其中图像标记用来链接图像地址，同时还可以设置其他参数，如宽度、高度等。只要会设置＜img＞标记的语法点就可以放入漂亮的图片了。不过想控制它还要学几个属性，如宽度width、对齐align等。本节会详细讲解图像的基本操作。

5.1.1　在网页中插入图像

插入图像用到的属性是src，正确格式为＜img src="#"＞，其中#表示图像url路径，如下面的代码表示链接一幅图像。

＜img src="cn. jpg"＞

上述代码表示在一个＜img＞标记中，插入一张名为cn.jpg的图片。应当注意，＜img＞标记是放在＜body＞＜/body＞里面的，大部分标记都是在网页体中放置，代码5.1表示插入图像的完整代码。

代码5.1　源文件\第5章\插入图像.html

——————————————-文件名：插入图像.html———————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞插入图像＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜！—以下是插入图像—＞

07 ＜img src="html.jpg"＞

08 ＜/body＞

09 ＜/html＞

【代码解析】已在网页中成功插入一张图片，在学习其他参数设置时，只须在上面代码第7行插入图像标记＜img＞中添加参数就行了，如设置图像宽度为200像素，代码为：＜img width="200px"src="html.jpg"＞，同理还可设置其他参数。在默认条件下，显示的是图像文件的原图，网页效果如图5.1所示。

图　5.1　插入图像