凡是接触过前端的开发者,相信都会接触到<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. img标签中alt属性与title属性在seo的作用-摘自网友

    img标签中alt属性与title属性作用,也许大家比较迷惑,现在给大家举例说明.alt属性是图片的替换文字.title属性规定元素的额外信息,有视觉效果. 目录 alt属性 title属性 ie和f ...

  2. HTML语言中img标签的alt属性和title属性的作用与区别

    alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方,而title属性是在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,有点类似jQuery的h ...

  3. img标签中alt属性与title属性

    alt属性 1.alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户,以及视觉障碍的用户和使用屏幕阅读器的用户.当图片不显示的时候,图片的替换文字.2.alt属性值得长度必须少于100个英 ...

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

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

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

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

  6. 【HTML】input标签中alt属性和title属性的比较

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

  7. 图片的title属性和alt属性的区别

    在前端开发中,经常遇到有人在问图片的alt属性和title属性的区别,这是因为很多人对于alt属性和title属性没有彻底搞明白,今天零度给大家分析分析. title属性 首先,来看一下什么是titl ...

  8. 正确使用HTML title属性

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

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

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

随机推荐

  1. Get the current user permission level on a list item with ecmascript 分类: Sharepoint 2015-07-14 14:13 7人阅读 评论(0) 收藏

    To Check current users permissions using Ecmascript\Javascript client object model SharePoint 2010. ...

  2. [lintcode] Binary Tree Maximum Path Sum II

    Given a binary tree, find the maximum path sum from root. The path may end at any node in the tree a ...

  3. Virgo Tomcat Server 指南-Hello World

    Eclipse发布了最新的Virgo Tomccat Server.VTS是一个应用服务器与OSGi紧密结合并且可以开发bundles形式的Spring web apps应用,他们同样拥有OSGi和S ...

  4. 1.SQLAlchemy文档-简介(中文版)

    Python的SQL工具包和对象关系映射器     SQLAlchemy的是Python的SQL工具包和对象关系映射器,让应用程序开发人员可以使用上SQL的强大功能和灵活性.     它提供了一套完整 ...

  5. Ubuntu14.10+cuda7.0+caffe配置

    转自:http://blog.csdn.net/lu597203933/article/details/46742199 Ubuntu14.10+cuda7.0+caffe配置 一:linux安装 L ...

  6. linux常用命令之--目录与文件的操作命令

    1.linux的目录与文件的增.删.改.复制 pwd:用于显示当前所在的目录 ls:用于显示指定目录下的内容 其命令格式如下: ls [-option] [file] 常用参数: -l:显示文件和目录 ...

  7. 7、Khala设备资源的申请和释放

    在实际业务中,我们每次登录后,可能需要在服务端维护一些设备相关的资源信息,而不同设备所需维护的资源信息又不尽相同.Khala提供了设备资源的维护储存功能,在此我们通过一个具体的业务中对其进行展示. 一 ...

  8. 群星云集 BOSS上海时装秀—情沪魅影- 在线观看 - 乐视网

    群星云集 BOSS上海时装秀-情沪魅影- 在线观看 - 乐视网 群星云集 BOSS上海时装秀-情沪魅影

  9. Ubuntu16.04 IDE: 用Vim逐步打造一个IDE

    目前打造完成的IDE主要有: terminator+Bundle+NERDtree+YCF(youcompleteme)+UltiSnips+新创建文件自动补充注释和作者,版权信息等 1,当任务比较多 ...

  10. Mysql隔离级别,锁与MVCC

    关键词:事务,ACID,隔离级别,MVCC,共享锁,排它锁 阅读本文前请先阅读http://hedengcheng.com/?p=771 http://www.hollischuang.com/arc ...