网站建设讲堂

网站建设、维护、运营常识与SEO技巧

首页网站建设讲堂网站建设常识

网站建设讲堂

网站代码中图片的Alt和Title属性有什么样的区别?

发布日期: 2013-02-06 12:54:15   作者: 

网站上的图片在书写网站代码时有两种属性,一种是alt属性,另一种是title属性,这两种属性有什么区别呢?作为长春网站建设的技术人员,我来为大家讲解。

在IE6浏览器中,我们会看到图片只有alt属性,却没有title属性,设置了之后,鼠标放到图片上,还是会有显示的。如果没有alt属性,而有title属性,在IE6浏览器中也可以看到提示信息。而在火狐浏览器(FireFox)中,就不是这样的效果了,alt属性是不显示的。为什么会这样呢?因为IE不符合网页标准。

在标准浏览器下图片设置了title属性不管图片是否存在,鼠标经过都会有提示。若图片不存在时候,只设置了alt属性,那么图片上会显示alt属性里的描述内容,并且鼠标放上去没有提示信息(非ie6以下浏览器)。

更清楚的看alt属性和title的不同:
//*这些图片不显示
<img src="http://www.leroa.net/../images/001.jpg" width="80" height="60"alt="网站建设">
<img src="http://www.leroa.net/../images/001.jpg" width="80" height="60" title="网站建设" />
//*这些图片正常显示
<img src="http://www.leroa.net/../images/001.jpg" title="网站建设" />
<img src="http://www.leroa.net/../images/001.jpg" alt="网站建设" />

在IE浏览器中都会出现文字提示。

而在火狐浏览器中,前三句代码,鼠标经过图片时,都会出现文字提示,最后一句代码,鼠标经过图片不会显示文字提示。通过这些可以知道在显示时候alt属性和title的不同地方。

图片alt属性用于指定图片的替换文字,title属性用于设置当前对象提供建议性的信息。优化网站图片的时候,适合将alt属性设置为图片本来的含义,而将title设置成指示性信息,示例如下: 其作用是:alt属性,当图片不能正常显示时,则显示alt中的文字,表达要传递的信息,将title属性设置为“返回网站主页”,作用是当用户将鼠标指向图片时,提示给用户的信息。

title属性有一个很好的用途,即为链接添加描述性文字,特别是当链接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方,他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息,比如日期或者其他非本质的信息。title属性值可以比alt属性值设置的更长。
 

上一篇:网站怎样才能顺利...   下一篇:网站建设成功上线...