【学习笔记】Html：图片标签img中属性alt与title的区别

图片标签img中alt与title的区别的示例代码：

<img src="0.jpg""title="title正确图片" height="100"  width="100" >
<img src="0.jpg" alt="alt正确图片" height="100"  width="100">

<img src="1.jpg" title="title错误图片"height="100"  width="100" >
<img src="1.jpg" alt="alt错误图片" height="100"  width="100">

 

 IE6下：

 IE8下：

FireFox下：

Chorm下：

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

1. 含义不同

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

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

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

3. 对于网站SEO(Search Engine Optimization搜索引擎优化)来说，还有最重要的一点：

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

注意：在IE6下，图片位置正确时，且title和alt都有，无论顺序，显示的都是title值。