图片标签img中alt与title的区别

  可能很多新手在做站内优化的时候,不明白图片标签img中alt与title的区别,今天sem学院就单独为大家整理分享一下其中的区别。

  大家可以一起动手来做测试:把以下代码保存的文本中,命名为.html结尾的文件,然后分别用不同浏览器打开。

  代码:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head><title>图片标签img中alt与title的区别</title></head>

<body>
<img src=”图像的正确地址” title=”title正确图片” >
<img src=”图像的正确地址” alt=”alt正确图片” >

<img src=”图像的错误地址” title=”title错误图片” >
<img src=”图像的错误地址” alt=”alt错误图片” >

</body>
</html>

  

  ie6下各代码的表现

  

  ie8下各代码的表现

  firefox下各代码的表现

  从以上三组图中我们可以看出alt与title的不同:

  1、含义不同

  alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明

  2、在浏览器中的表现不同

  在firefox和ie8中,当鼠标经过图片时title值会显示,而alt的值不会显示;只有在ie6中,当鼠标经过图片时title和alt的值都会显示。

  对于网站seo优化来说,title与alt还有最重要的一点:

  搜索引擎对图片意思的判断,主要靠alt属性。所以在图片alt属性中以简要文字说明,同时包含关键词,也是页面优化的一部分。条件允许的话,可以在title属性里,进一步对图片说明。

  作者:孟凡成@sem学院

  原文链接:http://www.semxyz.com/seo/780.html

  版权所有,转载请以链接形式注明作者及原始出处

时间: 2024-09-18 00:44:59

图片标签img中alt与title的区别的相关文章

img标签中alt和title属性的正确使用_经验交流

在的img标签有两个属性分别为alt和title,对于很多初学者而言对这两个属性的正确使用都还抱有迷惑,当然这其中一部分原因也是ie浏览器所导致的.正确的使用这两个属性除了可以提高图片的搜索能力外,在用户体验上也是很有帮助,下面就来说说alt和title的概念与正确使用. alt 此属性的实质作用是图片在无法正确显示的时候起到文本替代的作用,不过在IE6下还起到了title的作用(鼠标放上去后的文字提示),IE的实现方法实际上是错误的.如果想在鼠标滑过时显示提示,应该用title属性.由于错误的

详细讲解CSS中alt和title属性的困惑

css 浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆.例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Windows的IE浏览器. 替换文字(alt text)并不是用来做提示(tool tip),或者更加确切的说,它并不是为图片提供额外说明信息的.相反地,title属性才应该用来为元素提供额外说明信息.这些信息在大部分图像浏览器里显示为提示(tool tip),虽然制造商可以任意采取其他方式渲染ti

php正则给图片提取/替换/添加alt标签的例子

例子 $arcrow['title']='文章标题'; $arcrow['content']='文章正文'; $pattern = "/(<img(?![^<>]*?alt=[^<>]*?>))(.*?>)/is"; //给图片添加alt标签 $replacement = "\$1 alt='" . strip_tags($arcrow['title']) . "' \$2"; $arcrow['cont

图片标签alt属性和title属性的作用

不管是做seo的还是网站建设的,这中间有很多人对图片用alt属性还是用title属性,然后怎么来用,很迷茫,不是很清楚.那长沙seo就来说说他们的作用以及怎么用,这样就知道什么时候该用了. alt属性是对图片起到一个注释的作用,现在搜索引擎对图片的读取功能有限,当我们要告诉搜索引擎这个图片是什么的时候就会用到alt属性,同时对于seo也是很有好处的,可以适当的增加某个关键词密度(切忌关键词堆砌).其实当你用到一些站长工具的时候,会提示你首页有多少个图片没有加alt属性.最近的百度统计的seo建议

Office2013中Alt快捷键的使用方法

  Office2013中Alt快捷键的使用方法           (1)在启动Office应用程序后,按"Alt"键,此时在功能区的标签快速访问工具栏的按钮上将会显示出操作快捷键,如图1所示. Office2013 (2)此时,按显示的键即可打开相应的选项卡,同时将显示该选项卡中的按钮可使用的快捷键.例如,这里按"H"键打开"开始"选项卡,该选项卡中的命令按钮可以使用的快捷键将显示出来,如图2所示.按指定的键即可执行相关的操作,如依次按&qu

iphone-添加图片到UITabBarController中

问题描述 添加图片到UITabBarController中 我要在UITabBarController中添加一个图片,是整张图片添加到标签栏 tab bar,不是添加到哪个标签项tab item中,不知道能不能实现?有高人帮忙指点一下,多谢. 解决方案 如果用iOS 5+版本,可以用setBackgroundImage: UITabBar *yourtabBar = [yourtabController tabBar]; [yourtabBar setBackgroundImage:[UIIma

myeclipse工具出问题了,在js代码中Alt+/提示东西的时候,报了下面的错误

问题描述 myeclipse工具出问题了,在js代码中Alt+/提示东西的时候,报了下面的错误 rt,求解决 解决方案 看不到信息,能不能重新截图 解决方案二: 看不到图片,没法判断,为什么不用eclipse.个人感觉eclipse很好用.http://www.kxikx.com/index.jsp

flex Away3D给物体添加跟随标签(图片标签,文字标签)

玩游戏时,常常会看到标签跟随的效果.比如人物头上的血条,怪物头上的名字等.这些标签会一直跟随着人物的移动,而且不管人物不管如何转向,标签始终是朝向我们. 下面通过样例演示如何实现图片,或者文字的标签跟随效果.       1,添加图片标签   为了让图片始终朝向我们,这里用到了 sprite3D.并将其设置偏移量,添加到对应的 Mesh 中即可.     package{     import flash.display.Sprite;     import flash.display.Stag

js-点击一个li获取li标签里面的img的title值,求指导

问题描述 点击一个li获取li标签里面的img的title值,求指导 解决方案 <ul> <li> <img alt="qq" src="sd" title="1"> <img alt="qq" src="sd" title="2"> </li> </ul> 解决方案二: <ul> <li>