img标签alt和title属性的区别

alt

主要用于img标签，在图片因为网络不良，路径错误等而无法渲染到页面时候代替其渲染到页面。（也就是说图片没法显示，就用alt的属性值代替），它会被搜索引擎所识别。
alt属性有利于SEO，是搜索引擎搜录时判断图片与文字是否相关的重要依据。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<img src="" alt="我来替代图片" height="200" width="200" title="触碰我显示">
</body>
</html>

在这里插入图片描述

title

title是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有title文字显示。在IE浏览器中alt起到了title的作用，变成文字提示。
title主要的作用是面向用户体验。
在这里插入图片描述

从上面两张图中可以很明显得看到，无论图片是否能显示，title总是能够在页面得以使用，而alt则只能在图片显示不出来的时候才能有用武之地。

总结：alt和title两者都各有作用，alt更多的是有利于SEO，而title则更多的是增强用户的体验，在IE浏览器中alt起到了title的作用，变成文字提示，所以在需要兼容浏览器的情况下，我们最好把两个属性都写上，以保证旧版本的浏览器也能够正常展示。