img中alt与title辨析

HTML5学堂:img中alt与title有何不同?本文主要从表现在含义、浏览器中的表现以及对于网站seo优化程度三个方面进行辨析,接下来我们一起来看看。

示例代码:

<img src="h5course.jpg" alt="蜡笔小新 属性alt的值" title="蜡笔小新 属性title的值">

1、含义不同:

img标签alt属性是当图片不存在时或加载失败时的替代文字(进行显示);img标签title属性是对图片的描述与进一步说明。

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

在FF、chrome和IE8+中,当鼠标经过图片时title属性的值会显示,而alt属性的值不会显示;只有在IE6、IE7中,如果img标签没有写title属性,而写了alt属性的时候,alt属性值会进行显示;如果img写了title属性和alt属性的时候,只会显示title属性值。

为img标签设置title属性和alt属性,在IE6、IE7显示如下图

为img标签不设置title属性,但设置了alt属性,在IE6、IE7显示如下图

3、对于网站SEO优化来说:

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小蠢驴iOS专题

iOS中Cell约束--使用xib实现多label的自动约束--高度随内容自适应

2896
来自专栏知晓程序

开发 | 手把手,教你在小程序里做一个圆形进度条

今天想把之前在微信小程序开发过程中,制作的一个圆形进度条做成一个组件,方便以后直接拿来用。

903
来自专栏HTML5学堂

新浪面试真题

1.请写出一张图片的HTML代码,已知道图片地址为“images/abc.jpg”,宽100px,高50px 2.请问display:none和visibili...

33011
来自专栏小轻论坛

平面设计师必备的AI快捷键

在开多个AI文档的情况下。来回切换是有点麻烦的,点来点去有点慢 CTRL+F6,可以来回切换。

1952
来自专栏python3

tkinter -- 文本的多行显示

使用 width 和 heigth 来指定控件的大小,如果指定的大小无法满足文本的要求,

1205
来自专栏地方网络工作室的专栏

图片自适应父元素大小,并左右上下居中的css方法

图片自适应父元素大小,并左右上下居中的css方法 前言 这种效果多见于矩形盒子里面调用不规则的图片,希望能够达到的效果。这个效果可以很简单的用css来实现,虽然...

2078
来自专栏我的博客

ewebeditor v3.8水印处理位置调整

今天使用ewebeditor编辑器,发现图片水印不能调节,只能在左上角。于是找相关调节水印代码。找到关键代码,将水印调节到右下角了。 找到php文件夹下的upl...

2805
来自专栏数据小魔方

创意九宫格图片制作技巧!

今天给大家分享九宫格照片的制作技巧! ▽ 是不是每次看到朋友圈有人发九宫格图片 都觉得特别羡慕 其实这种图片可以自己制作 步骤也不复杂 下面交给大家三种制作方法...

3199
来自专栏跟着阿笨一起玩NET

DataGridView控件使用大全

DataGridView控件使用大全:http://www.haogongju.net/art/847949

1431
来自专栏闻道于事

正式学习第一天下午——基础标签及其属性

今天下午学习了html中的基础标签及其属性。以下面的HTML代码为例。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

2635

扫码关注云+社区