HTML 图片

alt属性

alt属性指定图片的替换文字,如果图片显示不出来就显示文字信息.

如果因为某些原因不能看见图片,alt属性的文字信息将图片替换为文字信息(可能因为带宽低,src属性有错,或者用户是屏幕阅读器).

如果浏览器显示不了图片,它将显示alt文字.

alt属性是需要的.没有它一个网页将不能正确的验证.

HTML屏幕阅读器

屏幕阅读器是一个软件,它能读取屏幕上显示的什么.

屏幕阅读器对于有些人来说很有用:盲人,视觉障碍的人,学习障碍的人.

图片尺寸-宽和高

你可以用style属性指定图片的宽和高.

值用像素指定(在值后跟px):

或者,你可以用width和height属性.这里,值的单位默认用px.

width和height用style属性指定?

在最新的HTML5标准里,width和height用style属性指定也是可以的.

我们建议你用style属性.这样可以防止样式表改变图片的原始大小.

图片在另一个文件夹

如果不指定,浏览器会到当前文件夹里找图片.

然而,把图片保存到子文件夹下很常用,你必须在src属性里包含子文件夹名.

图片在另一个服务器

一些站点会把图片专门保存到一个图片服务器.

事实上,你可以通过网络地址访问世界上的所有图片

动画图片

GIF标准允许动画图片:

注意:插入一张带有动画的图片和插入一张不带有动画的图片是一样的写法.

把一张图片作为链接

为了把一张图片当做链接,只需要把<img>标签嵌套于<a>标签里.

图片浮动

用CSS的float属性给图片添加浮动效果.

图片能浮动到文字的左边或右边.

图片地图

用<map>标签定义图片地图.图像地图就是图片的可点击区域.

<map>标签的name属性和<img>标签的usemap属性进行关联,从而建立图片和地图之间的关系.

本章小结

• HTML的<img>标签定义一张图片
• HTML的src属性指定图片的URL
• HTML的alt属性定义图片的替代文字,当图片不显示时
• HTML的width和height属性定义图片的尺寸
• CSS的width和height属性定义图片的大小(二者选一)
• CSS的<float>属性可以让图片进行浮动
• HTML的<map>元素定义图像地图
• HTML的<area>元素在图像地图上定义可点击区域
• HTML的<img>元素的usemap属性来指向图像地图

HTML的图片属性