alt属性和title属性

 更新时间:2016年9月20日 19:05  点击:1734

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

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

很多人看来对这两个属性感到迷惑(最近这个问题在Web Standards Group邮件列表里变多了), 所以我写下我的想法,如何去用它们。

alt属性

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

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

使用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属性。

title属性

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

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

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

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

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

<

  目前,WWW网站已经成为互联网最重要的组成部分,是您通往成功的关键。因此,创建WWW网站不仅是您网路行销的基础,更是每一个参与网路行销活动的企业或个人的第一步,也是极为重要的一步。首先,我们应该了解一下成功的网站应该具备哪些特点:

  结构清晰并且便于使用。如果人们看不懂或很难看懂您的网站,那么,他如何购买您的产品或服务呢?尽量使用一些醒目的标题或文字来突出您的产品或服务。并且始终牢记即使您拥有最棒的产品,如果客户从您的网站上不清楚您在卖什么或不清楚如何受益的话,他们是不会购买的。

  导向清晰。使用超文本链接或图片链接,使人们能够在您的网站上自由前进或后退,而不要让他们使用浏览器上的前进或后退。记住在所有的图片上使用“ALT”标识符注明图片名称或解释,以便那些不愿意自动加载图片的观众能够了解图片的含义。

  快速的下载时间。不要妄想人人都使用33.6K的猫。很多的浏览者不会进入需要等待5分钟下载时间才能进入的网站,请记住在互联网上30 秒的等待时间与我们平常10分钟等待时间的感觉相同。因此,要尽量避免使用过多的图片及体积过大的图片。

  非图形的内容。许多网站的设计者使用了动态“Gif”图片和Java动画以使网站上的图形或文字产生动态的效果。这不仅仅会增加网页下载时间,它更会分散观众对您网站其他信息的注意力。由于在互联网浏览的大多是一些寻找信息的人们,因此您要确定您的网站将为他们提供的是有价值的内容,而不是过度的装饰。

  方便的反馈及订购程序。这是一个通常被网站设计者忽略的问题。让客户明确您所能提供的产品或服务并让他们非常方便地订购是您获得成功的重要因素。如果客户在您的网站上产生了购买产品或服务的欲望,您是否能够让他们尽快实现吗?是在线还是离线?




< 1.初始会商,主要是收集该站点的关键信息,包括站点的目标读者.要发布的内容.开发Web服务器平台;
2.概念开发,设计师根据收集的信息,开始构思,通常,设计师要把这些构思用草图的形式呈现给顾客,这个草图要有整个网站的结构,不同的布局.设计及导航;

3.内容综合,当决定了设计师的设计,设计师开始制作一些初始图样,这些图样用PHOTOSHOP那样的程序来创建,然后,设计师将图样打印出来配合文字;

4.HTML布局和导航,一旦客户同意了这些内容综合,设计师开始编制Web页面,导航器也被编制到页面中,使客户第一次真正体验一下;

5.图形制作,如果客户同意了站点的外观和感受,设计师将大量制作所需的图形,并进行优化;

6.内容流程,客户的书面材料利用各种网页技术(CSS、JAVA、FLASH),有机的和相关的图形整合在一起;

7.测试,在站点被提交给客户之前,设计师要彻底测试每个Web页面和联结,利用清单,进行修补;

8.交付,一旦签收,客户要经常进行他们的测试,找出排版和内容方面的错误,做完了这些次要的修正后,正式启用站点.

这套完整的计划可以用1-12个月来完成,平均完成时间为4个月.当站点启用后,要进行跟踪调查,以确定人们如何使用站点。经过6-12个月的运行之后,重新收集数据,开始重新设计,然后这个Web设计过程再开始一遍。


<
[!--infotagslink--]

相关文章

  • 浅谈C# 字段和属性

    这篇文章主要介绍了C# 字段和属性的的相关资料,文中示例代码非常详细,供大家参考和学习,感兴趣的朋友可以了解下...2020-11-03
  • js修改input的type属性问题探讨

    js修改input的type属性有些限制。当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题。但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改。...2013-10-19
  • Vue之计算属性详解

    这篇文章主要为大家介绍了Vue的计算属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助...2021-11-16
  • C# Dynamic关键字之:调用属性、方法、字段的实现方法

    本篇文章是对C#中调用属性、方法、字段的实现方法进行了详细的分析介绍,需要的朋友参考下...2020-06-25
  • 详解jquery方法属性

    这篇文章主要介绍了jquery的方法属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2021-11-10
  • 关于vue属性使用和不使用冒号的区别说明

    这篇文章主要介绍了关于vue属性使用和不使用冒号的区别说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-22
  • C# 列表List的常用属性和方法介绍

    这篇文章主要介绍了C# 列表List的常用属性和方法介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-12
  • 在Vue中获取自定义属性方法:data-id的实例

    这篇文章主要介绍了在Vue中获取自定义属性方法:data-id的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
  • C#类中属性与成员变量的使用小结

    本篇文章主要是对C#类中属性与成员变量的使用进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助...2020-06-25
  • 轻松学习C#的属性

    轻松学习C#的属性,对C#的属性感兴趣的朋友可以参考本篇文章,帮助大家更灵活的运用C#的属性。...2020-06-25
  • JavaScript中的全局属性与方法深入解析

    这篇文章主要给大家介绍了关于JavaScript中全局属性与方法的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-14
  • angularjs循环对象属性实现动态列的思路详解

    这篇文章主要介绍了angularjs循环对象属性实现动态列的思路详解,本文给大家分享一个demo代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-11-02
  • JS如何判断对象是否包含某个属性

    这篇文章主要介绍了JS如何判断对象是否包含某个属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-08-30
  • SpringBoot 返回Json实体类属性大小写的解决

    这篇文章主要介绍了SpringBoot 返回Json实体类属性大小写的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-10-14
  • C#中属性和成员变量的区别说明

    本篇文章主要是对C#中属性和成员变量的区别进行了介绍说明。需要的朋友可以过来参考下,希望对大家有所帮助...2020-06-25
  • JavaScript中关联原型链属性特性

    这篇文章主要介绍了JavaScript中关联原型链属性特性的相关资料,需要的朋友可以参考下...2016-02-18
  • 详解EFCore中的导航属性

    这篇文章主要介绍了详解EFCore中的导航属性的相关资料,帮助大家更好的理解和学习使用ASP.NET CORE,感兴趣的朋友可以了解下...2021-09-22
  • Vue.js第三天学习笔记(计算属性computed)

    这篇文章主要为大家详细介绍了Vue.js第三天的学习笔记,vue.js计算属性computed,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
  • php类中protected与const属性详解

    在php中protected是私有变量,若该成员被声明称protected(保护),则代表只能在该类和该类的子类中使用该字段,而const是一个常量它的值一旦赋值不能被改变,下面看两个例子...2016-11-25
  • css中Float属性深入剖析与应用

    这篇文章介绍了css中的float属性的应用和理解,让设置的标签产生浮动效果。希望能帮助到有需要的同学。 一、Float的特性 1. 应用于文字围绕图片 2. 创建一个块级框...2017-01-22