偶然在群里提到了img标签的alt和title属性到底有什么区别.然后做了以下试验.
<p><img src="" alt="alt"></p>
<p><img src="" title="title"></p>
<p><img src="" alt="alt" title="title"></p>
<p><img src="http://ihkhost.b0.upaiyun.com/upyun.gif" width="200" height="20" alt="alt"></p>
<p><img src="http://ihkhost.b0.upaiyun.com/upyun.gif" width="200" height="20" title="title"></p>
<p><img src="http://ihkhost.b0.upaiyun.com/upyun.gif" width="200" height="20" alt="alt" title="title"></p>
测试结果如下:
alt和title都是提示性语言标签,它们之间是有一定区别的:
alt是在图片不存在时作为替代文字;
title是对图片的描述与进一步说明;
Firefox16,chrome,IE8+等较新的浏览器alt属性是不显示的,只显示title属性;
在ie6,ie7等老一些的内核的浏览器中,当鼠标指向图片时,有title显示title,没有title则显示alt.如果alt和title属性同时存在,显示的是title值.
补充:alt属性一般用于图片提示,title还可以用于给普通文字或者链接文字提示。
一般用法如下代码:
<p title=”给普通文字加提示”>文字</p>
<a href=”http://www.**.com/” title=”给链接文字加提示”>文字</a>