HTML5学堂-码匠 HTML5学堂

您当前位于:HTML+CSS结构样式 ——> img标签中alt与title属性的区别

img标签中alt与title属性的区别

2015/05/26 21:59:49 | 作者:HTML5学堂(码匠) | 分类:HTML+CSS结构样式 | 关键词:img标签,alt,title

img中alt与title辨析

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

示例代码:

  1. <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显示如下图

HTML5学堂 img中alt与title辨析 h5course

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

HTML5学堂 img中alt与title辨析 h5course

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

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

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS