21xrx.com
登录
  

HTML 图片

上一章 下一章

JPG图片

GIF图片

PNG图片

    要记得给图片指定宽度和高度.如果不给图片指定宽度和高度,当图片加载时页面将会闪烁.

HTML图片语法

在HTML里,图片用<img>标签定义.

<img>标签是空的,它只拥有属性,并且没有结束标签.

src属性指定图片的URL地址(网络地址):

alt属性

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

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

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

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

HTML屏幕阅读器

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

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

    屏幕阅读器能读取alt属性.

图片尺寸-宽和高

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

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

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

例子

width和height用style属性指定?

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

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

例子

图片在另一个文件夹

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

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

例子

图片在另一个服务器

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

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

例子

动画图片

GIF标准允许动画图片:

例子

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

把一张图片作为链接

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

例子

    添加"border:0",因为IE9(或更早版本的IE)会在图片周围显示边框.

图片浮动

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

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

例子

图片地图

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

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

例子

本章小结

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

    加载图片需要时间,大尺寸的图片会降低页面的加载速度,用图片要小心.

HTML的图片属性

标签描述
<img>定义一张图片
<map>定义图像地图
<area>在图像地图里定义可点击区域
  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
21技术    www.21xrx.com 备案号:蜀ICP备17043188号-2