img标签上title与alt属性的区别是什么?

        常用的img标签中有title和alt两个属性,那么他们分别是什么呢?又有哪些区别呢?

一、什么是title属性?

        title属性是global attribute之一,作用是提供建议性的信息,通常是鼠标滑动到元素上是显示。

        title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。title属性可以为链接添加描述性文字,来更加清楚的表达链接的目的。

效果如下:

img标签上title与alt属性的区别是什么?_第1张图片

 二、什么是alt属性?

        alt属性,是的特有属性,是图片内容的等价描述,用于图片无法加载时显示或读屏器阅读图片。可提图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析。

        作用是当无法显示文档中的图片是,可以为浏览者提供文字说明,是用来替代图片的,而不是提供额外说明文字的。

效果如下:

图片未显示出来

img标签上title与alt属性的区别是什么?_第2张图片

三、两者的区别

        替换文字(alt text)并不是用来做提示(tool tip),或者更加确切的说,它并不是为图片提供额外说明信息的。相反地,title属性才应该用来为元素提供额外说明信息。

人生海海,码途徐徐,在每一段经历中,留下成长的印记,爱自己爱生活爱思考!

你可能感兴趣的:(前端基础知识要点,前端,html)