探秘:HTML标签中Alt和Title

发布:视觉前线 | 分类:网络应用 | 引用:0 | 浏览:

19 Jun 2010

HTML标签中Alt和Title都是提示性语言标签,对于img标签而言,Alt和Title这两个属性,除了可以提高图片的搜索能力外,在用户体验和SEO上也是很有帮助的,下面谈谈Alt和Title的概念与正确使用。

Alt
Alt属性的实质是,图片在无法正确显示的时候起到文本替代的作用,不过在IE6下还起到了title的作用(鼠标放上去后的文字提示),IE的实现方法实际上是错误的。如果想在鼠标滑过时显示提示,应该用title属性。由于错误的引导,很多初学者就在img标签内只加了alt属性。所以这里表扬一下Firefox。

Title
鼠标滑过时显示的文字提示,在用户体验和SEO上很重要。当然没必要把所有的img标签都加此属性,比方说Logo这样比较重要,或者说用户会体验到的图片内容,建议一定要加此属性。

用法:
<p title="给链接文字提示">文字</p>
<a href="#" title="给链接文字提示">文字</a>
<img src="图片.gif" alt="logo">
<img src="图片.gif" alt="logo" title="首页" />

关系:
当图片或文字链接有title或alt标注时,只要鼠标停留在它们上时,在鼠标的右下角出现一个提示信息框,对目标进行一定的注释说明。

区别:
Alt属性用来给图片提示的,即不能显示图像、窗体或applets的用户代理(UA)的时候,alt属性用来指定替换文字。
Title属性用来给链接文字或普通文字提示的,即为链接添加描述性文字,特别是当链接本身并不是十分清楚地表达了链接的目的。

下面是网页设计过程中,一个细微的发现:



Dreamweaver CS4中的一段关于“Alt和Title”的代码



IE浏览器:
单独使用title和alt的时候,均能正常显示。但代码中同时存在title和alt的时候,优先显示alt。



Firefox浏览器:
两个属性,无论是否同时存在,仅能显示title,不显示alt。


原创文章如转载,请注明:转载自视觉博客(SHJUE.COM) [ http://www.shjue.com/ ]

本文链接地址:http://www.shjue.com/post/65.html

5评论 - 探秘:HTML标签中Alt和Title

Avatar

番薯窝

2010-06-19 23:24:25

非常好的教程!

Avatar

远走高飞

2010-06-20 09:01:48

一直有加。。但具体效果不详。。

Avatar

老七

2010-06-20 13:46:25

又懂了点~~~

Avatar

甜甜

2010-06-20 16:06:15

学习了!

Avatar

seoguess

2010-06-21 21:36:24

这个我还真的没有注意到,alt和title不同浏览器的显示竟然有所不同。

我就觉得蛮奇怪,上次用firefox看我的一个网站的logo,没有显示我添加的alt属性,原来是我没有加title标签的原因。

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。