`

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

    博客分类：
  • seo
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下图片截图

ie6下各代码的表现

ie8下图片的截图

ie8下各代码的表现

firefox下图片截图

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
版权所有，转载请以链接形式注明作者及原始出处。

 

分享到：
| 通过关键词的流量判断网站的状况
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    图片标签IMG内alt和title属性.docx

    图片标签IMG内alt和title属性.docx

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

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

    关于alt和title的用法区别详解

    2.alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意，alt是替代图像作用而不是提供额外说明文字的。根据...

    HTMLimg标签的alt属性和title属性使用介绍

    HTML的img标签：alt属性和title属性，很多人看来对这两个属性感到迷惑，所以我写下我的想法，如何去用它们

    HTML教程：title属性与alt属性

    title 和alt 属性，给我最直观的感受就是，可以提高文档的适应性，并合理提高关键词密度。在XHTML标准里，图片的alt 属性是必须的。 　XHTML是CSS布局的基础，jb51.net一直强调XHTML知识的学习，重视语义和文档的...

    CSS中的属性选择符和结构化伪类

    alt 属性中的文本会在图片因故未能加载时显示，或者由屏幕阅读器朗读出来。而 title 属性会在用户鼠标移动到图片上时，显示一个包含相应文本的提示。 属性值选择符 格式：[属性名=属性值]示例： CSS Code复制内容到...

    php正则表达式匹配img中任意属性的方法

    经常使用到一些提取图片中scr、alt、title、等的属性，这里总结给大家一些常用的，感觉还不错，比较通用

    JSTL详细标签库介绍

    &lt;LI&gt;&lt;A title=NoClassDefDoundErr与ClassNotFoundException区别 href="http://www.jspcn.net/htmlnews/11500204450151651.html" target=_blank&gt;NoClassDefDoundErr与ClassNotFoundException区别&lt;/A&gt; &lt;LI&gt;&lt;A ...

    JavaScript Title、alt提示（Tips）实现源码解读

    而对于图片标签img也有一个alt属性可以起到类似的作用。但很显然这种提示框太单调了，为此有人用JavaScript实现了漂亮的提示框效果，这种效果常用在WEB游戏中，其中下图的网易邮箱与迅雷影视页面就用到这种效果，...

    很炫的div遮罩层浏览图片

    3.在预览图片链接中加入标签rel="lightbox" 例如： &lt;a href="images/image-1.jpg" rel="lightbox" title="my caption"&gt;&lt;IMG height=40 src="pic-img/thumb-1.jpg" width=100 border="0"&gt;这样就可以显示例一效果 ...

    HTML+css知识总结(建议收藏）

    图片标签：正常img后必须是src=url链接，用来获取图片。属性有title显示内容，height与width宽高，alt无法显示显示备注，border图片边框宽度。 链接标签：a标签后必跟herf=“x”，其中x可以引用外部的链接或者内部...

    易语言软件下载列表带纵向滚动条

    服务器文件格式：。。&lt;img&gt;http://www.xxx.com/xxx.jpg&lt;/img&gt;。&lt;title&gt;xxx软件&lt;/title&gt;。...&lt;img&gt; ---&gt; 列表图片。&lt;title&gt; ---&gt; 软件标题。&lt;alt&gt; ---&gt; 软件介简。&lt;url&gt; ---&gt; 下载地址。@噌经滴承诺。

    在线考试选择题中如何添加图片.docx

    在发布线上考试的过程中，会出现选择题没上传图片的情况。那么怎样找到上传图片功能呢，本教程介绍了选择题中如何添加图片的操作方法。

    当你说到HTML（HyperText Markup Language），它是用于创建网页内容的标准标记语言 HTML通过标签（t

    HTML通过标签（tags）来定义网页中的元素，如段落、标题、链接、图片、列表等。... &lt;img src="example.jpg" alt="示例图片"&gt; &lt;ul&gt; 项目1&lt;/li&gt; 项目2&lt;/li&gt; 项目3&lt;/li&gt; &lt;/ul&gt; 访问示例网站&lt;/a&gt; &lt;/body&gt; &lt;/h

    前端vue面试题大全汇总

    5、img 的alt 与title 有何异同？ strong 与em 的异同？ 6、你能描述一下渐进增强和优雅降级之间的不同吗? 7、为什么利用多个域名来存储网站资源会更有效？ 8、请谈一下你对网页标准和标准制定机构重要性的理解。 9...

    elementor-responsive-image:Elementor的响应式img小部件

    需要alt ， title和figcaption 。 默认情况下应打印它们。 在以下情况下最好使用背景图像： 图像纯粹是为了设计。 默认情况下不应打印图像。特征能够选择手机，平板电脑和台式机图像。 能够选择要使用的元素： img...

    PHP爬虫实例-4K壁纸爬取测试

    只要爬取.clearfix li&gt;a&gt;img元素里面的src属性和alt属性即可获得图片url和图片标题，实现代码如下 // 采集规则 $rules = [ // 表示 获取类型为.clearfix li a img 元素的 alt属性值 "title"=&gt;[".clearfix li a ...

    jQuery插件ImageFlyout弹出图片实现javascript放大图片功能

    &lt;a href="iphone.jpg" title="jquery.flyout"&gt;&lt;img src="iphone_small.jpg" alt="iphone" /&gt;&lt;/a&gt; &lt;/div&gt; 三，Javascript部分(jQuery插件jQuery Image Flyout弹出图片调用) [removed] &lt;!-- $(function() { $...

Magicbox
Global site tag (gtag.js) - Google Analytics