- 1、本文档共11页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
【网页设计】【HTMLCSS】【第5章图像】
·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
文档评论(0)