关注互联网与艺术设计!
发布:视觉前线 | 分类:网络应用 | 引用:0 | 浏览:
19 Jun 2010HTML标签中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。
2010年端午节Logo大变脸 (2010-6-16 22:39:44)
百度历年端午节6次Logo创意(2003-2010) (2010-6-15 21:12:23)
品味谷歌产品的细腻设计 (2010-6-11 21:49:5)
百度知道五周年“知道就是力量”专题策划 (2010-6-10 21:53:59)
CorelDRAW X5抢先体验 (2010-6-7 22:13:18)
第N次打车上班 (2010-6-4 23:47:53)
新备案系统的那些囧事 (2010-5-31 21:36:50)
浅谈:设计师与妓女的区别 (2010-5-30 21:58:3)
Google免费提供:网页字体在线服务 (2010-5-26 21:49:46)
CorelDraw 9与CorelDRAW 12 (2010-5-24 22:1:58)
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
5评论 - 探秘:HTML标签中Alt和Title
番薯窝
2010-06-19 23:24:25
远走高飞
2010-06-20 09:01:48
老七
2010-06-20 13:46:25
甜甜
2010-06-20 16:06:15
seoguess
2010-06-21 21:36:24
我就觉得蛮奇怪,上次用firefox看我的一个网站的logo,没有显示我添加的alt属性,原来是我没有加title标签的原因。