凡是接触过前端的开发者,相信都会接触到<img>标签,自然alt title更是不会陌生,但对他们真正的含义和使用方法,你确定了解吗?  

参考:

  http://www.junchenwu.com/2005/05/alttitle.html

  当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆。例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Windows的IE浏览器。

  替换文字(alt text)并不是用来做提示(tool tip),或者更加确切的说,它并不是为图片提供额外说明信息的。相反地,title属性才应该用来为元素提供额外说明信息。这些信息在大部分图像浏览器里显示为提示(tool tip),虽然制造商可以任意采取其他方式渲染title属性的文字。

1.alt属性

  描述:

为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。替换文字的语言由lang属性指定。

  Alt属性(注意是“属性”而不是“标签”)包括替换说明,对于图像和图像热点是必须的。它只能用在img、area和input元素中(包括applet元素)。对于input元素,alt属性意在用来替换提交按钮的图片。比如:<input type="image" src="data:image.gif" alt="Submit" />.

  使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。

  明白了上面的用法之后,我们来看看使用中需要注意些什么:

  在写替换文字前仔细想想,保证那些文字确实为那些看不到图像的人提供了说明信息,并且在上下文中有意义。对于那些装饰性的图片可以使用空的值(alt="",引号中间没有空格),而不是使用不相关的替换文字比如“blue bullet”或者“spacer.gif”。不要忽略它,如果你忽略了,那么一些屏幕阅读器会直接阅读图像文件的文件名,那些文字浏览器,比如Lynx会显示图像文件的文件名,而那对于你的浏览者就没什么用了。

  包含文字的图像图片设置替换文字是最简单的,图像中包含的文字一般来说就可以作为alt属性值。

  至于替换文字的长度,看看WCAG 2.0(网站内容可用性指南2.0)是怎么说的:Alt属性值得长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

  我把它理解为“尽可能短,尽需要长”。

  即使你想让它显示为提示(tool tip),也不要给文字元素使用alt属性,这并不是它的用法。至今据我所知,那样做仅能在Windows的IE浏览器和古老的Netscape 4.*(windows版本)有效。没有一个Mac的浏览器会将它显示为提示(tool tip)。

  当浏览器把替换文字显示为提示(tool tip)后,那些错误使用alt属性的行为也受到了鼓励。一些人开始写无意思的替换文字,因为他们趋向于认为它是一个额外的说明信息,而不是不能显示图像的替换。其他人可能不想让提示(tool tip)出现,然后就完全忽略了写alt属性值。这些错误的做法,都给那些不能看到图像的浏览者造成了困难。

  额外的说明信息和非本质的信息请使用title属性。

2.title属性

title属性为设置该属性的元素提供建议性的信息。

  title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。但是并不是必须的。可能这正是为什么很多人不明白何时使用它。

  使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息(tool tip),然而这又由制造商来决定如何渲染title文字。一些浏览器会将title文字显示在状态栏里。比如早期版本的Safari浏览器。

  title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方,他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息,比如日期或者其他非本质的信息。

  title属性值可以比alt属性值设置的更长。不过要注意的是,有些浏览器会截断过长的文字(比如工具提示或其他)。比如Mozilla核心的浏览器只能显示最先的60个字符。这被认为是一个Mozilla bug,这是你要注意的。

3.使用前先考虑

  我的建议是保证替换文字(alt text)精要。在大多数的应用里,都应该被留白,alt=""(注意两引号中没有空格)。 想想那些图像,为那些浏览者提供了什么样的信息,你应该用什么文字去描述它,或者你该为看不到图像的人提供什么信息? 将替换文字写成“照片:站在大楼外的CEO,穿着灰色西装和黑色领带,望着天”对于看不到图像的人真的有帮助?如果你觉得是,那么你就写吧。在很多情况下,我觉得让替换文字留白比较好。

  对于title属性,比较难于给出严格的使用说明。我大部分用在那些不能自我释意的链接上,比如同一页面上的相同的链接文字,不同的链接页面。有时候也为一些按钮或者表单元素提供更多的说明文字。

4.更长的描述

  当一个图片需要更加长的描述,而超过alt属性的限制,那么还有一些选择。

  longdesc属性可以用来提供链接到一个包含图片文字描述的单独页面。这就意味着把浏览者链接到另外的页面,这可能会造成理解上的困难。另外浏览器对于longdesc属性的支持也是不一致的,并且不是非常好。

  longdesc属性可以包含一个链接到当前文档的其他部分(锚点)来取代链接到另外的页面。在Accessibility footnotes, Andy Clarke很好的解释说明了如何应用。

  描述链接(D links)可以用来补充longdesc。一个描述链接就是一个常规的链接,连接到含有替换文字的页面。该链接被置于图像的旁边,并且在所有浏览器中都是可是的。对于它的有效性人们有很多不同意见,我的个人意见不大喜欢这个注意。WCAG也是,在他们的工作草案HTML Techniques for WCAG 2.0中,描述链接是被“不赞成”的。

  如果对图片的长的描述对于任何浏览者都有用,那么你得考虑让它简单的显示在同一个文档里面,而不是链接到其他页面里或者藏起来。这样每个人都可以阅读到。这是一种简单低技术含量的方法。

------------------------------------------------

  博主经营一家发饰淘宝店,都是纯手工制作哦,开业冲钻,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!
店名:
  小鱼尼莫手工饰品店
经营:
  发饰、头花、发夹、耳环等(手工制作)
网店:
  http://shop117066935.taobao.com/

---------------------------------------------------------------------

继续正题...

参考:  

  http://www.jb51.net/article/13362.htm

  在的img标签有两个属性分别为alt和title,对于很多初学者而言对这两个属性的正确使用都还抱有迷惑,当然这其中一部分原因也是ie浏览器所导致的。正确的使用这两个属性除了可以提高图片的搜索能力外,在用户体验上也是很有帮助,下面就来说说alt和title的概念与正确使用。

alt 
  此属性的实质作用是图片在无法正确显示的时候起到文本替代的作用,不过在IE6下还起到了title的作用(鼠标放上去后的文字提示),IE的实现方法实际上是错误的。如果想在鼠标滑过时显示提示,应该用title属性。由于错误的引导,很多初学者就在img标签内只加了alt属性。所以这里再次表扬一记FF! 
                
title 
  鼠标滑过时显示的文字提示,用户体验上很重要。当然不必要所有的img标签都加此属性,比方说logo这样比较重要或者说用户会体验到的图片内容建议一定要加此属性。

<img src="图片路径" alt="logo" title="首页" />

alt属性和title属性差异---终于分清楚了!的更多相关文章

  1. HTML中input标签的alt属性和title属性的比较

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

  2. 【转】图片IMG标记的alt属性和title属性的使用

    alt text 替 换文字(alt text)是为了给那些不能看到你文档中图像的浏览者提供文字说明.这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器 ...

  3. 正确使用HTML title属性

    如果你想对使用手机,平板电脑和辅助技术的用户隐藏某些内容,而只对键盘用户显示,那么请使用title属性. 细节 HTML的title属性本身有问题.之所以有问题是因为它在一些重要的方面表现的不够好,尽 ...

  4. img标签中alt和title属性的正确使用

    在的img标签有两个属性分别为alt和title,对于很多初学者而言对这两个属性的正确使用都还抱有迷惑,当然这其中一部分原因也是ie浏览器所导致的.正确的使用这两个属性除了可以提高图片的搜索能力外,在 ...

  5. JS魔法堂:属性、特性,傻傻分不清楚

    一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...

  6. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  7. td的title属性

    今天才知道html元素td还有一个title属性,就是一个tooltip的东西,即当你把鼠标放在td上面的时候,会弹出一个提示语,这个提示语就是td的title. 把td的文本赋值给title: ht ...

  8. html a 链接标签title属性换行鼠标悬停提示内容的换行效果

    鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的.如何换行呢? 这里DIVCSS5总结介绍两种换行方法为大 ...

  9. 【js】将table的每个td的内容自动赋值给其title属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 我看不下去鸟。。。。Java和C#的socket通信真的简单吗?

    这几天在博客园上看到好几个写Java和C#的socket通信的帖子.但是都为指出其中关键点. C# socket通信组件有很多,在vs 使用nuget搜索socket组件有很多类似的.本人使用的是自己 ...

  2. CDR VBA鼠标选择

    Dim x As Double, y As Double, Shift As Long, b As Boolean, doc As Document Dim sel1 As Shape, sel2 A ...

  3. Null value was assigned to a property of primitive type setter of

    在SSH项目的开发中遇到了下面的错误: 检查后发现数据库和映射文件中这个字段是允许为空的,为什么还要出错呢?原来是因为这个字段是int的,int是基本类型,即使设置成可以为空也不能取空值. 解决的办法 ...

  4. spark standalone ha spark submit

    when you build a spark standalone ha cluster, when you submit your app,  you should send it to the l ...

  5. EF 延迟加载和预先加载

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精   本节探讨延迟加载和预先加载 Entity Frame ...

  6. 概率论与数理统计讲课PPT和往年期末试卷

    讲课PPT 第17课:数理统计的基本概念 注 : 我会陆续把讲课PPT放上去,大家可以下载. 往年试卷及解答 往年期末试卷及解答 注 : 供同学们参考以备考.

  7. 解析json

    String json = "{\"elements\":[{\"distance\":{\"text\":\"1364 ...

  8. java基础3_流程控制语句

    一 条件判断 1. 条件运算符(三元表达式) ,其形式为: type d = a ? b : c; 具体化形式为:int d = 2 < 1 ? 3 : 4; 2. 轻量级的文本编辑器:Ultr ...

  9. Linux中获取本机网络信息的几个函数及应用

    一.读取/etc/hosts 几个函数 头文件<netdb.h> 1.void sethostent(int stayopen);//开打/etc/hosts 配置文件 2.struct ...

  10. javascript quine

    javascript有一些奇怪的性质,恩,比如说,非常容易写一个quine,即自己输出自己代码的东西. function a(){console.log(a.toString()+";a() ...