第5章 图像11new

《第5章 图像11new》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、·56·第5章图像图像在网页中应用很广泛，一个新闻中有图片新闻，里面的相片就用在网页中放置图像的结果。同理，随着数码相机的普及，网上免费的相册越来越多，故免费相册中的相片也用到图像标记，把相片在网页中显示出来。在一张网页中，显示不同大小的图片，提供给用户浏览，同时，再给它加一个链接地址上去就成了图像链接，为了体现图像的效果，也可以给出图片的边框，现实生活是称之为相框等，所以本章来学习图像标记，其标记用表示，学完后会掌握以下内容：图像的基本语法图像与文字对齐边框处理图像的超链接图像客户端映射图5.1图像的基本语法本节学习图像的基本语法，在网页中放入图像很简单，只需在

2、标记对中插入图像标记，其中图像标记用来链接图像地址，同时还可以设置其他参数，如宽度、高度等。只要会设置标记的语法点就可以放入漂亮的图片了。不过想控制它还要学几个属性，如宽度width、对齐align等。本节会详细讲解图像的基本操作。5.1.1在网页中插入图像插入图像用到的属性是src，正确格式，其中#表示图像url路径，如下面的代码表示链接一个图像。上述代码表示在一个标签中，插入一张名为cn.jpg的图片。应当注意，标记是放在

3、里面的，大部分标记都是在网页体中放置，代码5.1中表示插入图像的完整代码。代码5.1源文件第5章插入图像.html·57·这样，就在网页上成功插入一张图像，在学习其他参数设置的时候，只需对上面代码标记中做参数添加就行了，如设置图像宽度为200，像素用，同理，还有其他设置。在默认条件下，图像显示的是图像文件的原图，网页效果

4、如图5.1所示。图5.1插入图像5.1.2图像无法显示时的提示信息在浏览网页时，会出现不能正常显示图像的问题，如图像地址不存在等，那么图像右上角有叉显示，表示未正常显示图像。那么有没有这种情况，当图像不能正常显示时，而又要在第一时间让用户知道这图像表达的信息？答案是有的。这就是将要讲的第二个参数alt。alt表示鼠标指针在图片上面时，显示的交互文本信息，当图像非正常显示时，在图像的区域显示这alt中的文本，即没有看到图像，可以给用户提供该图像的主题。在实现应用的时候，为了避免图像不能正常显示的情况，都要设置alt参数，首先在正常情况下显示图片，当鼠标指针在图像的位置时会显示

5、着正是alt引号里面的文字。其次，在图像未正常显示时，也给用户提供图像的信息，对信息的设置刚好是alt的设置。下面代码表示用来描述图片的信息。出来了吗？对图像cn.jpg设置alt参数，在里面设置alt为“风景”，当显示图像时，会有提示。同理，当图像显示不正常，会出现的什么样的效果，用过alt参数就知道答案了，代码5.2表示了alt用法。代码5.2源文件第5章alt用法.html·58·

6、lt-->当出现正常的图像时，效果如图5.2所示，当其他原因，使图像不能显示时，有alt的设置，效果如图5.3所示。图5.2图像正常显示图5.3图像非正常显示5.1.3控制图像的大小当图像不是想要的大小时，或者要给不同图像设置同一个宽度。那么就得从图像标记中设置对象的大小。在前面提到过设置图像的大小，这里的大小包括宽和高，这样在做网页时就可以控制图像在特定位置上的大小了。图像大小的设置非常容易，就是在上面的代码中，用width代表宽，height代表高，如设置下图是200*150像素

7、大小，把它设成400*300像素的图后，大小变化了，效果也不一样。以下代码是在代码5.2中的中加入width=200px和height=150px的设置，px是表示像素，长度单位。在标记中设置了宽度（width）和高度（height）后，显示的图像大小变化了，效果如图5.4所示。·59·图5.4控制图像大小好了，图像基本语法先学这么多，