img中alt与title的辨析｜码匠

码匠 2017-05-09 10:20

HTML5学堂 - 码匠：img中alt与title有何不同？本文主要从表现在含义、浏览器中的表现以及对于网站seo优化程度三个方面进行辨析，接下来我们一起来看看。

示例代码：

<img src="h5course.jpg" alt="蜡笔小新 属性alt的值" title="蜡笔小新 属性title的值">

1、含义不同：

img标签alt属性是当图片不存在时或加载失败时的替代文字（进行显示）；img标签title属性是对图片的描述与进一步说明。

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

在FF、chrome和IE8+中，当鼠标经过图片时title属性的值会显示，而alt属性的值不会显示；只有在IE6、IE7中，如果img标签没有写title属性，而写了alt属性的时候，alt属性值会进行显示；如果img写了title属性和alt属性的时候，只会显示title属性值。

为img标签设置title属性和alt属性，在IE6、IE7显示如下图

img中alt与title辨析 | 码匠

为img标签不设置title属性，但设置了alt属性，在IE6、IE7显示如下图

img中alt与title辨析 | 码匠

3、对于网站SEO优化来说：

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

网站推荐：https://weixin.mj216.com/

HTML5学堂（码匠） - https://weixin.mj216.com/