<img> 标签的 alt 属性

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。 当用户因为某种原因(比如：打开速度慢、src属性存在错误或者用户使用了屏幕阅读器)不能查看图像时，alt属性提供了替代信息

如果html标签如下

<img src="./tulip.jpg" alt="郁金香">

显示效果没什么不一样 但是如果图片路径错误或其他原因，导致图片不能正常显示

这时候img标签的alt属性就发挥了作用
在无法看到图片的情况下，alt属性有助于我们了解一些关于此图片的信息

此外如果是视力受损的读者使用屏幕阅读器，这些应用程序会将图像中提供的alt文字读出，让他们以聆听理解图像内容。

所以img标签的alt属性最好在图片引入的时候就写入

此外，来看下面两个图片 这里，src 都无效且未加载。第一个没有设置 alt 属性，而第二个设置了一个空的 alt 属性。效果如下

    <img width="300" height="188" src="tulip.jpg">
    <img width="300" height="188" src="tulip.jpg" alt="郁金香">

没有 alt的图像仍然保留其空间，这会使页面显示效果变得很不自然。
而另一个折叠以适应其空alt属性的内容，这会导致它显示为一个小点。

而这样可以更好的向用户反馈，让用户知道这个加载失败的图片内容是什么。

除此之外，我们还可以使用伪元素来替换显示的默认替代文本，让加载失败的图片呈现更为美观。方法是将伪元素放置在默认文本的顶部，将其隐藏起来。

img:after {   
  content: "\f1c5" " " attr(alt);  
  
  font-size: 16px;  
  font-family: FontAwesome;  
  color: rgb(100, 100, 100);  
  
  display: block;  
  position: absolute;  
  z-index: 2;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background-color: #fff;  
}

效果如下