【网页设计】【HTML+CSS】【第5章 图像】.pdf

·56 · 第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 head title插入图像/title /head body ·57 · !— 以下是插入图像-- img src=html.jpg /body /html 这样，就在网页上成功插入一张图像，在学习其他参数设置的时候，只需对上面代码 标记img 中做参数添加就行了，如设置图像宽度为200 ，像素用img width= “200px ” src= “html.jpg ” ，同理，还有其他设置。在默认条件下，图像显示的是图像文件的原图，网 页效果如图 5.1 所示。 图5.1 插入图像 5.1.2 图像无法显示时的提示信息 在浏览网页时，会出现不能正常显示图像的问题，如图像地址不存在等，那么图像右 上角有叉显示，表示未正常显示图像。那么有没有这种情况，当图像不能正常显示时，而 又要在第一时间让用户知道这图像表达的信息？答案是有的。这就是将要讲的第二个参数 alt 。alt 表示鼠标指针在图片上面时，显示的交互文本信息，当图像非正常显示时，在图像 的区域显示这alt 中的文本，即没有看到图像，可以给用户提供该图像的主题。 在实现应用的时候，为了避免图像不能正常显示的情况，都要设置 alt 参数，首先在正 常情况下显示图片，当鼠标指针在图像的位置时会显示着正是 alt 引号里面的文字。其次， 在图像未正常显示时，也给用户提供图像的信息，对信息的设置刚好是 alt 的设置。下面代 码表示用来描述图片的信息。 img src=cn.jpg alt=风景 出来了吗？对图像 cn.jpg 设置 alt 参数，在img里面设置 alt 为“风景”，当显示图像 时，会有提示。同理，当图像显示不正常，会出现的什么样的效果，用过 alt 参数就知道答 案了，代码 5.2 表示了 alt 用法。 代码 5.2 源文件\第 5 章\alt 用法.html html head titlealt 用法/title ·58 · /head bo