web网页鼠标经过时提示框气泡属性 alt 与 title 区别及图片损坏替换默认图片

　　一、对于定义和用法区别

　　　　alt 属性规定在图像无法显示时的替代文本。假设由于一些原因(如网速慢、src属性中错误、浏览器禁用图像、用户用屏幕阅读器)用户无法查看图像，alt 属性可为图像提供替代的信息。

　　　　　　注意：当用户把鼠标移动到 img 元素上时，IE(9之前版本) 把 alt 属性的值显示为工具提示。根据 HTML 规范，这种行为并不正确。若需要为图像创建信息提示气泡，请使用 title 属性！

　　　　　　还有，alt 也是Web无障碍应用(残障人)的重要属性，残障人用的语音浏览器或语音软件读取图片信息时，alt中的描述信息会被读取出来，利于残障人士使用。

　　　　　　所以，在图片中，alt和title 最好一起用。title可代替alt的效果，但反过来不行。当图像元素只有title没有alt时，图片无法显示时title便代替alt提供替代的信息。

<img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" title="这是鼠标停留提示" alt="这是图像无法显示代替文本" />

　　　　title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。

<div title="提示气泡">区块</div>
<p title="提示气泡">文本</p>  <!-- 等等其他HTML标签都可用 -->

　　二、对于可应用的元素区别

　　　　alt属性　　可用于图片信息描述及替代文本。

　　　　title属性　  可用于所有HTML元素额外信息提示。如常用的 超链接a元素提示、文本类元素提示、li列表文本提示、图标或图像的信息含义提示、某div项目信息提示气泡等等。

 　　另：图片加载失败时替换默认图片。当图片出错时显示一个破裂的小图片图标，不好看且也可能影响页面布局。采用以下方式最简单解决该问题。

<img src="./image.gif" onerror='this.src="./default.gif" />

 　　　　其中，img元素自带 onerror 属性，加载失败时，就触发 error 事件，onerror 属性后面的值也可以是一个自己写好的函数，如 onerror="myFunction()"。

　　参考文章及作者：

　　　　暗影刀客 https://blog.csdn.net/u012436704/article/details/83588615

　　　　菜鸟教程 https://www.runoob.com/tags/att-img-alt.html 

　　　　　　　　 https://www.runoob.com/tags/att-global-title.html

　　　　夫安尔 　https://blog.csdn.net/tanga842428/article/details/76763693?utm_source=blogxgwz6

 

小伙伴们如有更好解决方式或发现错误，欢迎来评论补充或纠正~~~谢谢 (^ - ^ )