“约见”面试官系列之常见面试题之第五十篇之title和alt的区别（建议收藏）

html中的title属性和alt属性让人有些混淆。

以前不知道有title这个属性，第一次用到它时，就和alt产生了混淆。

一位朋友告诉我说，alt是图片img标签里用的，title是超链接里用的，当时想可能是这样的吧，

后来知道这是很不严谨的，alt是图片img标签里用的没错，可是你在img标签里使用title属性，结果一样可以出现效果。

在记事本中分别写三条语句，保存成html进行测试：

结果：

第一条语句在ie中输出图像，鼠标放到图像上，会出现“这是我校的logo”，即图像正常显示时，没有title的情况下，显示alt内容。

第二条语句在ie中输出图像，鼠标放到图像上，只出现“大家好”，即有alt和title，只会显示title。

第三条语句在ie中输出图像，ie找不到图像，但是“这是我校的logo”几个字出现在了图像位置。同时，鼠标放到图像位置区，会出现title内容“大家好”的提示。

为了表述得更明白，我从网上找到了一些有用的资料，摘其精要：

alt属性的功能是不能显示图像信息时候的替换文字(即在图片显示的位置上显示文字，说明这个图片的要显示的内容)。Alt属性值的长度必须少于100个英文字符。

title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。

title属性的功能是提示。额外的说明信息和非本质的信息请使用title属性。title属性值可以比alt属性值设置的更长。

title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。

这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。

另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。

本文链接地址:http://www.cnblogs.com/yoyo24456/archive/2014/07/04/3823728.html

首先明确一下概念，alt是html标签的属性，而title既是html标签，又是html属性。
title标签这个不用多说，网页的标题就是写在<title></title>这对标签之内的。
title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意，alt是替代图像作用而不是提供额外说明文字的。根据一些SEO人士的说法，使用alt属性还具有搜索引擎优化效果，因为搜素引擎是无法直接读取图像的信息的，alt可以为其提供文字信息所以对搜索引擎比较友好。
通常人们容易搞错的是title和alt这两个属性同时用于img标签的时候。在旧版本的IE浏览器中，鼠标经过图像时显示的提示文字是alt的内容，而忽略了title属性，这个曾经误导了很多人。因此，如果想在IE中显示title的内容，要么title属性和alt一致，要么alt内容为空（“”，空格也不能有）。不过，在新版的IE（IE8及以上）中，已不会出现这种情况了。
另外，当a标签内嵌套img标签时，起作用的是img的title属性。

本面试题为前端常考面试题，后续有机会继续完善。我是歌谣，一个沉迷于故事的讲述者。

欢迎一起私信交流。

“睡服“面试官系列之各系列目录汇总（建议学习收藏）

“约见”面试官系列之常见面试题之第五十篇之title和alt的区别（建议收藏）相关推荐

“约见”面试官系列之常见面试题之第五十三篇之网站的资源优化（建议收藏）
本面试题为前端常考面试题,后续有机会继续完善.我是歌谣,一个沉迷于故事的讲述者. 欢迎一起私信交流. "睡服"面试官系列之各系列目录汇总(建议学习收藏)
“约见”面试官系列之常见面试题之第六十七篇之jsonp原理和实现（建议收藏）
一. 同源策略所有支持Javascript的浏览器都会使用同源策略这个安全策略.看看百度的解释: 同源策略,它是由Netscape提出的一个著名的安全策略. 现在所有支持JavaScript 的浏览 ...
“约见”面试官系列之常见面试题之第四十七篇之前端页面的组成（建议收藏）
最准确的网页设计思路是把网页分成三个层次,即:结构层.表示层.行为层. 网页的结构层(structural layer)由 HTML 或 XHTML 之类的标记语言负责创建.标签,也就是那些出现在尖括 ...
“约见”面试官系列之常见面试题之第八十篇之css常见属性（建议收藏）
CSS3增加的新的属性和新属性值很多,其中的重点,比如Flex布局,2D3D效果,关键帧动画等,我们会在其他篇拿出来详细讲解,并附上实例和代码,供大家参考学习.本文只介绍其他常用且兼容性良好(IE9及 ...
“约见”面试官系列之常见面试题之第七十篇之==和===（建议收藏）
==和===的区别== 在比较时等号左右两侧数据类型不同时会先转成相同数据类型,再比较== 是相对比较: === 是绝对比较1.1 字符串 == 数字 :字符串转换成数字console.log(1 = ...
“约见”面试官系列之常见面试题之第六十篇之事件绑定和普通事件（建议收藏）
一个很简单的示例. 普通添加事件的方法: var btn = document.getElementById("hello"); btn.onclick = function(){ ...
“约见”面试官系列之常见面试题之第五十九篇之js中push(),pop(),unshift(),shift()的用法小结（建议收藏）
1.push().pop()和unshift().shift() 这两组同为对数组的操作,并且会改变数组的本身的长度及内容. 不同的是 push().pop() 是从数组的尾部进行增减,unshift ...
“约见”面试官系列之常见面试题之第五十八篇之join和split（建议收藏）
join() 方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. <script>var a=new Array();a[0]="XHTML" ...
“约见”面试官系列之常见面试题之第五十七篇之强制类型转换（建议收藏）
JS的类型转换,强制转换和隐式转换 JS的类型转换 1.强制转换通过String(),Number(),Boolean()函数强制转换 var str=123;var str1='123';cons ...

“约见”面试官系列之常见面试题之第五十篇之title和alt的区别（建议收藏）

“约见”面试官系列之常见面试题之第五十篇之title和alt的区别（建议收藏）相关推荐

最新文章

热门文章