alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方,而title属性是在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,有点类似jQuery的hover,你可以自己试试,另外,HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的。
相同点:他们都会飘出一个小浮层,显示文本内容。
不同点;
1.alt只能是元素的属性,而title即可以是元素的属性也可以是标签,例如:<title>标题</title>。
2.alt属性则是用来指定替换文字,只能用在img、area和input元素中(包括applet元素),用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意,alt是替代图像作用而不是提供额外说明文字的。根据一些SEO人士的说法,使用alt属性还具有搜索引擎优化效果,因为搜素引擎是无法直接读取图像的信息的,alt可以为其提供文字信息所以对搜索引擎比较友好。
而title可以用在任何元素上,把鼠标移动到元素上面,就会显示title的内容,以达到补充说明或者提示的效果。
but,通常人们容易搞错的是title和alt这两个属性同时用于img标签的时候。在旧版本的IE浏览器中,鼠标经过图像时显示的提示文字是alt的内容,而忽略了title属性,这个曾经误导了很多人。因此,如果想在IE中显示title的内容,要么title属性和alt一致,要么alt内容为空(“”,空格也不能有)。不过,在新版的IE(IE8及以上)中,已不会出现这种情况了。
另外,当a标签内嵌套img标签时,起作用的是img的title属性。
一、是什么? 本质alt: 为不能显示图像、窗体或applets的用户代理指定 备用文本。(备用文本的语言由lang指定)
二、为什么存在:
title: 该属性为元素提供 相应的 额外的 参考信息。alt: 一些非文本元素(IMG, AREA, APPLET, and INPUT)允许作者通过指定 备用文本 来描述元素 内容,避免元素非正常渲染时不可读。指定元素的 备用文本 是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些没有图形显示终端的用户;不支持图像显示、图像显示受损或被关闭的浏览器用户;视觉障碍依靠屏幕阅读器的用户。
title: title属性的值可能被用户代理以各种不同的方式来呈现。举个例子,可视化的浏览器常常将其呈现为 "tool tip"。音频用户代理则会在相同上下文中朗读title中的信息,例如,设置 link 元素的的title属性来使用户代理(可视化的或不可视化的)告诉用户对应的链接资源的性质。
三、用在哪里
alt:IMG 和 AREA 元素的 alt 属性必须被指定,INPUT 和 APPLET 元素的 alt 属性是可选的。
alt 的注意点:
[list][*]Do not specify irrelevant alternate text when including images intended toformat a page, for instance, alt="red ball" would beinappropriate for an image that adds a red ball for decorating a heading orparagraph. In such cases, the alternate text should be the empty string ("").Authors are in any case advised to avoid using images to format pages; stylesheets should be used instead.
[*]Do not specify meaningless alternate text (e.g., "dummy text"). Not onlywill this frustrate users, it will slow down user agents that must convert textto speech or braille output.
[/list]
title : 大部分用于那些不能自我释义的链接上,有时候也为一些按钮或表单元素提供额外的说明文字。
另外,由于搜索引擎无法抓取图片(非SVG)中的内容,所以爬虫只能通过 alt 的值来判断图片内容。指定 IMG 上的 alt属性 有利于SEO。