全国统一热线:
028-86758058
18980748058
购买流程
付款方式
常见问题
在线提问
续租服务
购物车(
0
件)
用户名:
密 码:
记住
首 页
HOME
域名注册
DOMAIN
虚拟主机
WEB HOST
成品网站超市
AUTO Site
VPS主机
VPS SERVER
云 主 机
CLOUD HOST
租用托管
SERVER
海外主机
HK HOST
代理专区
AGENT
客服中心
SERVICE
站长教程
SERVICE
欢迎光临西部数据云计算中心,我们将竭诚为您提供最优质的服务!
中文域名
域名转入
域名转出
DNS管理
动态域名
获取域名证书
域名停放
域名过户
集群主机
双线主机
基本主机
港台主机
论坛主机
Linux主机
Vip合租主机
超G型主机
ASP.net主机
Java主机
智能建站主机
网店主机
美国主机
数据库
成品网站超市
智能建站主机
集群VPS主机
国内VPS主机
香港VPS主机
美国VPS主机
云主机介绍
云主机购买
服务器租用
主机托管
常见问题
香港主机
港台主机
美国主机
国内免备案
步骤流程
代理级别
代理合同
代理模式
代理优势
在线申请
产品列表
常见问题
代理商分布图
常见问题
有问必答
跟踪提问
购买流程
产品价格
付款方式
常用软件
网站备案
续租服务
汇款确认
相关文档
联系我们
域名资讯
主机资讯
行业动态
网页制作
php教程
mysql教程
域名资讯
云计算资讯
网络编程
您当前的位置:
首页
>
网络编程
>
网站制作
HTMLimg标签的alt属性和title属性使用介绍
时间:1970-01-01 来源:互联网 作者:佚名
当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆。例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Windows的IE浏览器。
替换文字(alt text)并不是用来做提示(tool tip),或者更加确切的说,它并不是为图片提供额外说明信息的。相反地,title属性才应该用来为元素提供额外说明信息。这些信息在大部分图像浏览器里显示为提示(tool tip),虽然制造商可以任意采取其他方式渲染title属性的文字。
很多人看来对这两个属性感到迷惑(最近这个问题在Web Standards Group邮件列表里变多了), 所以我写下我的想法,如何去用它们。
alt属性
为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。替换文字的语言由lang属性指定。 来源:How to specify alternate text.
Alt属性(注意是“属性”而不是“标签”)包括替换说明,对于图像和图像热点是必须的。它只能用在img、area和input元素中(包括applet元素)。对于input元素,alt属性意在用来替换提交按钮的图片。比如:<input type="image" src="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属性。
title属性
title属性为设置该属性的元素提供建议性的信息。
来源: The title attribute.
title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。但是并不是必须的。可能这正是为什么很多人不明白何时使用它。
使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息(tool tip),然而这又由制造商来决定如何渲染title文字。一些浏览器会将title文字显示在状态栏里。比如早期版本的Safari浏览器。
title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方,他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息,比如日期或者其他非本质的信息。
title属性值可以比alt属性值设置的更长。不过要注意的是,有些浏览器会截断过长的文字(比如工具提示或其他)。比如Mozilla核心的浏览器只能显示最先的60个字符。这被认为是一个Mozilla bug,这是你要注意的。
使用前先考虑
我的建议是保证替换文字(alt text)精要。在大多数的应用里,都应该被留白,alt=""(注意两引号中没有空格)。 想想那些图像,为那些浏览者提供了什么样的信息,你应该用什么文字去描述它,或者你该为看不到图像的人提供什么信息? 将替换文字写成“照片:站在大楼外的CEO,穿着灰色西装和黑色领带,望着天”对于看不到图像的人真的有帮助?如果你觉得是,那么你就写吧。在很多情况下,我觉得让替换文字留白比较好。
对于title属性,比较难于给出严格的使用说明。我大部分用在那些不能自我释意的链接上,比如同一页面上的相同的链接文字,不同的链接页面。有时候也为一些按钮或者表单元素提供更多的说明文字。
更长的描述
当一个图片需要更加长的描述,而超过alt属性的限制,那么还有一些选择。
longdesc属性可以用来提供链接到一个包含图片文字描述的单独页面。这就意味着把浏览者链接到另外的页面,这可能会造成理解上的困难。另外浏览器对于longdesc属性的支持也是不一致的,并且不是非常好。
longdesc属性可以包含一个链接到当前文档的其他部分(锚点)来取代链接到另外的页面。在Accessibility footnotes, Andy Clarke很好的解释说明了如何应用。
描述链接(D links)可以用来补充longdesc。一个描述链接就是一个常规的链接,连接到含有替换文字的页面。该链接被置于图像的旁边,并且在所有浏览器中都是可是的。对于它的有效性人们有很多不同意见,我的个人意见不大喜欢这个注意。WCAG也是,在他们的工作草案HTML Techniques for WCAG 2.0中,描述链接是被“不赞成”的。
如果对图片的长的描述对于任何浏览者都有用,那么你得考虑让它简单的显示在同一个文档里面,而不是链接到其他页面里或者藏起来。这样每个人都可以阅读到。这是一种简单低技术含量的方法。
来顶一下
返回首页
推荐资讯
从零开始学ASP.NET-基础篇第1/7页
第一天 学习目的: 掌握最基本的Label、TextBox、Button控件
ASP.NET入门数据篇
对于网站编程的初学者来说,总是会上网找些源码来看,但久而
相关文章
ASP.NET中用healthMonitor属性用法
AlternatingItemTemplate类似于 ItemTemplate 元素
asp.net TextBox回车触发事件 图片在img显示
使用 Salt + Hash 将密码加密后再存储进数据库
PHP采集静态页面并把页面下载css,img,js保存
php替换图片alt与title标签
正则文章内容中img图片地址与正则内容中的a连接地址
mysql alter修改字段的长度 类型sql语句
MySQL Replication提示错误Error You cannot ALTER a
MySQL ALTER命令使用方法详解
栏目更新
栏目热门
返回首页
关于我们
联系我们
付款方式
价格总览
资讯中心
友情链接
媒体关注
有问必答
投诉建议
网站备案
《中华人民共和国增值电信业务经营许可证》编号:川B2-20080058号
官方网址:
xibushuju.com
西部数据
Copyright © 2002~2015
天府快车
版权所有
电话总机:
028-86758058
(50线) 传真:
028-86758058