alt属性title属性的正确使用,不仅可以提高用户体验,还能提高搜索引擎对图片的搜索能力(图片SEO)。

  alt属性
  替换文字(alt属性)是为了给那些不能看到你网页文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户。所以替换文字是用来替代图像而不是提供额外说明文字的。Alt属性在IE浏览器中还起到了title的作用--鼠标经过时的文字提示。这是IE浏览器给了大家一个误导,在IE中ALT会变成文字提示是因为IE不标准。这一点Firefox做得就比较好。

  title属性
  title属性是对图片的说明和额外补充,如果需要在鼠标经过图片时出现文字提示应该用属性title。title属性的优先级高于alt属性。但由于错误的引导,很多初学者就在img标签内只加了alt属性,在IE浏览器中鼠标经过时能看到alt上的文字提示,而在firefox中要添加title才能看到鼠标经过时的文字提示,所以前面说这一点Firefox做得就比较好。

正确地使用alt属性和title属性:
  1. alt和title对访问者都很重要(alt对搜索引擎会更重要一些),所以在定义img对象时,最好将alt和title属性都写全,保证在各种浏览器中都能正常使用。
  2. 在alt和title中包含关键字,并且二者内容最好不一样。
  3. 不要在alt和title中堆积关键字,否则可能会导致搜索引擎惩罚。

alt属性和title属性的区别:
  下面看个例子,我们可以更清楚的对比alt和title之间的区别(http://www.ibloglife.com/下存在logo.gif而不存在logo.jpg):
     <!--图片不显示-->
     <img src="http://www.ibloglife.com/logo.jpg" width="88" alt="活着的博客" />  
     <img src="http://www.ibloglife.com/logo.jpg" width="88" title="活着的博客" />
     <!--图片显示-->
     <img src="http://www.ibloglife.com/logo.gif" width="88" title="活着的博客" />
     <img src="http://www.ibloglife.com/logo.gif" width="88" alt="活着的博客" />
  在IE浏览器中,这四句代码,鼠标经过图片时,都会出现文字提示“活着的博客”。而在Firefox浏览器中,前三句代码,鼠标经过图片时,都会出现文字提示,最后一句代码,鼠标经过图片不会显示文字提示。也就是说,当图片不能显示时,鼠标经过图片时会显示替换文字的内容,而当图片可以显示时,鼠标经过图片时,替换文字就不显示了。



© 活着的博客 - 李权辉的个人博客:人,终究是生活在现实之中,是为了活着而生活.