图片IMG标记的alt属性和title属性(转)
来源:互联网 发布:淘宝企业店铺开店费用 编辑:程序博客网 时间:2024/05/17 08:05
正确的使用alt text属性和title属性不仅可以提高图片的搜索能力,对用户体验上也是很有帮助。
alt text
替换文字(alt text)是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户。所以替换文字是用来替代图像而不是提供额外说明文字的。Alt text在IE浏览器中还起到了title的作用——鼠标经过时的文字提示。IE浏览器给了大家一个误导,在IE中ALT会变成文字提示是因为IE不标准。这一点Firefox做的就比较好。
title
title是对图片的说明和额外补充,如果需要在鼠标经过图片时出现文字提示应该用属性title。title属性的优先级高于alt text。但由于错误的引导,很多初学者就在img标签内只加了alt属性。
下面看个例子,我们可以更清楚的看清alt text和 title之间的区别:
//*图片不显示
<img src="fendou163.jpg" width="400" height="104"alt="奋斗网络">
<img src="fendou163.jpg" width="239" height="104" title="奋斗网络" />
//*图片显示
<img src="fendou163.png" title="奋斗网络" />
<img src="fendou163.png" alt="奋斗网络" />
在IE浏览器中,这四句代码,鼠标经过图片时,都会出现文字提示。
而在Firefox浏览器中,前三句代码,鼠标经过图片时,都会出现文字提示,最后一句代码,鼠标经过图片不会显示文字提示(如下图所示)。
也就是说当图片不能显示时,鼠标经过图片时会显示替换文字的内容,而当图片可以显示时,鼠标经过图片时,替换文字就不会显示出来了。
现在我们已经知道alt text和title有什么不同了,那么我们怎样才能正确使用它们呢?
1. alt text和title对访问者都很重要(alt text对搜索引擎会更重要一些),所以在定义img对象时,最好将alt text和title属性都写全,保证在各种浏览器中都能正常使用。
2. 在alt text和title中包含关键字,并且二者内容最好不一样。
3. 不要在alt text和title中堆积关键字,否则可能会导致搜索引擎惩罚。
- 图片IMG标记的alt属性和title属性(转)
- 图片IMG标记的alt属性和title属性(转)
- 前端开发规范(一):img标签:图片IMG标记的alt属性和title属性
- 图片IMG标记的alt属性和title属性的使用
- img图片标签alt和title属性的区别
- img图片标签alt和title属性的区别
- img标签的alt和title属性
- img标签的alt和title属性
- img标签的属性title和alt
- img的title和alt属性
- html img图片标签alt和title属性
- HTML img图片标签alt和title属性
- img属性里面的title和alt的区别
- img标签中alt和title属性的正确使用
- img标签中alt和title属性的正确使用
- <img>标签的alt属性与title属性的区别
- alt属性和title属性的区别
- Alt属性和title属性的区别
- 毕业一年送给自己的礼物
- 抑郁期过去,从今天开始,我年年都是20岁
- 你这辈子有没有真正的对自己狠心过一回?
- [Sql]使用触发器禁止创建后的修改动作
- 如何用SSE指令集进行高性能大规模排序
- 图片IMG标记的alt属性和title属性(转)
- CoCreateInstance returns 0x80080005 for Visual Studio 2008 based ATL service??
- C++中的虚函数(virtual function)
- MJ:关于ERP的SAAS初体验(用友伟库网和金碟友商网)
- 关于在PC机上获得程序的高性能研究
- 用VS2008向导创建的ATL windows 服务,在客户端创建COM对象是返回0x80080005
- C#中的Singleton实现
- JS弹出可拖动层,并蒙住页面(ie有效)
- SharePoint列表的SQL Reporting Services报表 之2