图片标签img中alt与title的区别与使用要点

来源：互联网发布：手机上淘宝怎么实名制编辑：程序博客网时间：2024/04/28 02:46

可能很多新手在做站内优化的时候，不明白图片标签img中alt与title的区别，今天sem学院就单独为大家整理分享一下其中的区别。

　　大家可以一起动手来做测试：把以下代码保存的文本中，命名为.html结尾的文件，然后分别用不同浏览器打开。

　　代码：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head><title>图片标签img中alt与title的区别</title></head>
<body>
<img src=”图像的正确地址” title=”title正确图片” >
<img src=”图像的正确地址” alt=”alt正确图片” >
<img src=”图像的错误地址” title=”title错误图片” >
<img src=”图像的错误地址” alt=”alt错误图片” >
</body>
</html>

　　ie6下各代码的表现

　　ie8下各代码的表现

　　firefox下各代码的表现

　　从以上三组图中我们可以看出alt与title的不同：

　　1、含义不同

　　alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明

　　2、在浏览器中的表现不同

　　在firefox和ie8中，当鼠标经过图片时title值会显示，而alt的值不会显示;只有在ie6中，当鼠标经过图片时title和alt的值都会显示。

　　对于网站seo优化来说，title与alt还有最重要的一点：

　　搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图片说明。