IMG 的alt和title的区别(转自 百度空间--路云的世界)

图片标签img中alt与title的区别

  图片标签img中alt与title的区别
  可能很多新手在做站内优化的时候,不明白图片标签img中alt与title的区别,今天为大家说一下其中的区别。
  大家可以一起动手来做测试:把以下代码保存的文本中,命名为.html结尾的文件,然后分别用不同浏览器打开。
  代码:
  <blockquote>
  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>[br]
  <html xmlns=”http://www.w3.org/1999/xhtml”>[br]
  <head><title>图片标签img中alt与title的区别</title></head>
  <body>[br]
  <img src=”图像的正确地址” title=”title正确图片” >[br]
  <img src=”图像的正确地址” alt=”alt正确图片” >
  <img src=”图像的错误地址” title=”title错误图片” >[br]
  <img src=”图像的错误地址” alt=”alt错误图片” >
  </body>[br]
  </html>
  </blockquote>


  预览以上代码我们可以看出alt与title的不同:
  1、含义不同
  alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明

  alt:使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明,也就是图片显示不了的时候显示的文字。
  title:图片正常显示时,鼠标悬停在图片上方显示的提示文字。
  title和alt虽然比较相似,但是还是有区别的,这两个属性比较混淆,我们来看一下两者 的区别:
  alt属性:
  使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来 就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。
  ①为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。 替换文字的语言由lang属性指定。
  ②它只能用在img、area和input元素中
  ③长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
  title属性
  使用title属性提供非本质的额外信息。title属性有一个很好的用途,即为链接添加描 述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。
  ①为设置该属性的元素提供建议性的信息。
  ①可以用在除了 base,basefont,head,html,meta,param,script和title之外的所有标签。
  ③值可以比alt属性值设置的更长。不过要注意的是,有些浏览器会截断过长的文字。比如 Mozilla核心的浏览器只能显示最先的60个字符。
  综上所述,我们可以知道,我们可以给option用title加注释,但是不能用alt加注释

  2、在浏览器中的表现不同
  在firefox和ie8中,当鼠标经过图片时title值会显示,而alt的值不会显示;只有在ie6中,当鼠标经过图片时title和alt的值都会显示。


  对于网站seo优化来说,title与alt还有最重要的一点:
  搜索引擎对图片意思的判断,主要靠alt属性。所以在图片alt属性中以简要文字说明,同时包含关键词,也是页面优化的一部分。条件允许的话,可以在title属性里,进一步对图片说明。

  在许多时候,alt的局限性很大.而title的扩展性很强.我们在互联网上经常会看到,当指针移上去时,有时显示的注释里不光有文字,还有图片,还可以换行,甚至更多!真的很奇妙,这是怎么弄上去的呢?直接将HTML代码写入TITLE标签里当然是不行的了.
  建议大家以后如果只是图片,或者是给按钮等常用的加些文字替换的话,用ATL属性就够了.而是要完成更酷的特效或者是加载图片,给更多的标签加注释时,应选用Title属性.

posted @ 2014-03-28 11:11  旧人新事  阅读(301)  评论(0编辑  收藏  举报