<img>标签的alt和title属性

上图是一个可折叠的list@dribbble,它由四个带链接的图片组成。注意到上面的类似于tooltip的文字,它是<img>title属性起得作用,当然IE下情况有所不同。

alt

定义alt属性是<img>标签必要的属性。当图片无法正常显示时,它被用作图片的替换文字。

使用:当图片无法找到或网络较差而无法正常显示,抑或者读者使用的是屏幕阅读器时,alt属性被用作文字替换,这也遵守了W3C的accesibility(易用性)标准。

语法<img alt="_text_">;

  • 当图片没有什么意义只用作装饰时,  alt="" ;
  • 如果图片包含了信息,text需要对信息进行说明;
  • 当图片包含在链接,即<a>标签内,text需要说明链接要跳转到哪里去;

支持:所有现代浏览器

title

定义和使用title属性不是<img>标签所必需的属性,当用户hover在图片上时,title的值将以tooltip的形式出现,对用户起一定的提示作用。title属性不是必须的,它更倾向于对用户体验的考虑。

支持:所有现代览器

注意:IE9之前的IE浏览器会将alt的值作为提示来显示,前提是title不存在,title存在时它还是会优先显示title的值。

<a href="www.xxx.com"><img alt="share page" title="share with others" src="images/share.png"></a>

 

上图是IE8(IE7也一样)下显示的内容

title不存在时,则显示alt的值。在firefox和chrome下都不显示任何文字。实际上这是IE的一种错误行为,它并不符合HTML规范。

comments powered by Disqus