HTML5技术

alt和title的区别与用法 - 骑车帅小子

字号+ 作者:H5之家 来源:H5之家 2017-04-28 08:03 我要评论( )

alt和title的是我们工作中经常用到这两个属性,但是一直没有总结他们的区别。现在就对他们两个的用法做一下总结。 相同点:他们都会飘出一个小浮层,显示文本内容。 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性也可以是标签,例如:title标题

alt和title的是我们工作中经常用到这两个属性,但是一直没有总结他们的区别。现在就对他们两个的用法做一下总结。

相同点:他们都会飘出一个小浮层,显示文本内容。

不同点:

1.alt只能是元素的属性,而title即可以是元素的属性也可以是标签,例如:<title>标题</title>。

2.alt属性则是用来指定替换文字,只能用在img、area和input元素中(包括applet元素),用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意,alt是替代图像作用而不是提供额外说明文字的。根据一些SEO人士的说法,使用alt属性还具有搜索引擎优化效果,因为搜素引擎是无法直接读取图像的信息的,alt可以为其提供文字信息所以对搜索引擎比较友好。

而title可以用在任何元素上,把鼠标移动到元素上面,就会显示title的内容,以达到补充说明或者提示的效果。

但是,通常人们容易搞错的是title和alt这两个属性同时用于img标签的时候。在旧版本的IE浏览器中,鼠标经过图像时显示的提示文字是alt的内容,而忽略了title属性,这个曾经误导了很多人。因此,如果想在IE中显示title的内容,要么title属性和alt一致,要么alt内容为空(“”,空格也不能有)。不过,在新版的IE(IE8及以上)中,已不会出现这种情况了。
另外,当a标签内嵌套img标签时,起作用的是img的title属性。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 列表总结Canvas和SVG的区别 - 妙音天女

    列表总结Canvas和SVG的区别 - 妙音天女

    2017-03-17 10:00

  • html4与html5的区别 - Aqiaoba

    html4与html5的区别 - Aqiaoba

    2017-02-23 13:00

  • 管理软件公司与互联网公司的区别 - 信息化建设

    管理软件公司与互联网公司的区别 - 信息化建设

    2017-01-01 13:03

  • 体验报告:微信小程序在安卓机和苹果机上的区别 - 腾讯攻城师lee

    体验报告:微信小程序在安卓机和苹果机上的区别 - 腾讯攻城师lee

    2017-01-01 11:02

网友点评