经常用到这两个属性,但是一直没有总结他们的区别。现在我对他们两个的用法做一下总结:

相同点:他们都会飘出一个小浮层,显示文本内容。

不同点:

1.alt只能是元素的属性,而title即可以是元素的属性也可以是标签,例如:<title>标题</title>。

2.alt属性则是用来指定替换文字,只能用在img、area和input元素中(包括applet元素),用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意,alt是替代图像作用而不是提供额外说明文字的。根据一些SEO人士的说法,使用alt属性还具有搜索引擎优化效果,因为搜素引擎是无法直接读取图像的信息的,alt可以为其提供文字信息所以对搜索引擎比较友好。

而title可以用在任何元素上,把鼠标移动到元素上面,就会显示title的内容,以达到补充说明或者提示的效果。

  but,通常人们容易搞错的是title和alt这两个属性同时用于img标签的时候。在旧版本的IE浏览器中,鼠标经过图像时显示的提示文字是alt的内容,而忽略了title属性,这个曾经误导了很多人。因此,如果想在IE中显示title的内容,要么title属性和alt一致,要么alt内容为空(“”,空格也不能有)。不过,在新版的IE(IE8及以上)中,已不会出现这种情况了。
另外,当a标签内嵌套img标签时,起作用的是img的title属性。

alt和title的用法区别的更多相关文章

  1. img中alt和title属性的区别

    在图像标签img中,除了常用的宽度width和高度height属性之外,还有两个比较重要并且也会用到的属性,就是alt和title,这都是用来显示图片内容的具体信息的,但是这两个属性也有不同的地方.a ...

  2. img图片标签alt和title属性的区别

    alt 用于图片没显示图片显示区域显示说明文字title 表示鼠标图片停留显示悬浮框其显示文字

  3. html中的alt和title用法区别

    html中的alt和title用法区别 首先明确一下概念,alt是html标签的属性,而title既是html标签,又是html属性.title标签这个不用多说,网页的标题就是写在<title& ...

  4. alt和title的区别与用法

    alt和title的是我们工作中经常用到这两个属性,但是一直没有总结他们的区别.现在就对他们两个的用法做一下总结.相同点:他们都会飘出一个小浮层,显示文本内容.不同点:1.alt只能是元素的属性,而t ...

  5. img的属性alt 与 title的区别

    当我们给图片加属性的时候,初学时,可能会弄混淆alt与title的区别,那么这两个的区别,我们可以从本意来看—— alt原词是“Alternate”,切换,替换的意思.常用的输入法切换会用到alt键进 ...

  6. IMG 的alt和title的区别(转自 百度空间--路云的世界)

    图片标签img中alt与title的区别 图片标签img中alt与title的区别 可能很多新手在做站内优化的时候,不明白图片标签img中alt与title的区别,今天为大家说一下其中的区别. 大家可 ...

  7. alt和title的区别

    alt是html标签的属性,而title既是html标签,又是html属性. 在图像标签img中,除了常用的宽度width和高度height属性之外,还有两个比较重要并且也会用到的属性,就是alt和t ...

  8. Html标签中Alt和Title都是提示性语言标签

    在Html标签中Alt和Title都是提示性语言标签,在我们浏览一些网页时,鼠标停留在一张图片或文字链接上时,在鼠标的右下角出现一个提示信息框,对目标进行一定的注释说明,这就是它们的作用.    其中 ...

  9. 『自我の感悟』alt or title?

    img标签中alt和title属性的正确使用:在的img标签有两个属性分别为alt和title,对于很多初学者而言对这两个属性的正确使用都还抱有迷惑,当然这其中一部分原因也是ie浏览器所导致的.正确的 ...

随机推荐

  1. box-shadow全面解析

    一.box-shadow语法: box-shadow: none | inset(可选值,不设置,为外投影,设置,为内投影) x-offset(阴影水平偏移量,正方向为right) y-offset( ...

  2. OpenXML_导入Excel到数据库

    (1).实现功能:通过前台选择.xlsx文件的Excel,将其文件转化为DataTable和List集合 (2).开发环境:Window7旗舰版+vs2013+Mvc4.0 (2).在使用中需要用到的 ...

  3. linux目录权限小记

    r : 拥有读取目录结构列表的权限 x:拥有进入此目录的权限 w: 1: 建立新的档案和目彔: 2删除已经存在的档案和目录(无论该档案的权限为何!) 3能够重命名档案和目录: 4 能够移动目录里面的 ...

  4. 腾讯RTX登录提示失败问题及处理办法

    出现问题时图片: 解决步骤: 首先ping一下RTX管理器所在的的ip地址 telnet一下服务器的端口 8000,8010 是否能通. 具体操作: 在无法登陆的客户端电脑上开始-运行-输入cmd 确 ...

  5. 《Hadoop权威》学习笔记五:MapReduce应用程序

    一.API的配置---Configuration类 API的配置:Hadoop提供了专门的API对资源进行配置,Configuration类的实例(在org.apache.hadoop.conf包)包 ...

  6. sprintf()详细介绍

    sprintf 编辑词条 编辑词条 -->   字串格式化命令,主要功能是把格式化的数据写入某个字符串中.sprintf 是个变参函数,使用时经常出问题,而且只要出问题通常就是能导致程序崩溃的内 ...

  7. Struts2 过滤器与拦截器

    学习Struts2时,发现有过滤器和拦截器,他们貌似都是一样的功能,但是为什么会有2个不同的名称呢?肯定是有区别的,所以打算自己整理一下. 过滤器,是在java web中,你传入的request,re ...

  8. JAVA三大特性之多态

    面向对象的三大特性:封装.继承.多态.从一定角度来看,封装和继承几乎都是为多态而准备的.这是我们最后一个概念,也是最重要的知识点. 多态的定义:指允许不同类的对象对同一消息做出响应.即同一消息可以根据 ...

  9. Lintcode--011(打劫房屋2)

    在上次打劫完一条街道之后,窃贼又发现了一个新的可以打劫的地方,但这次所有的房子围成了一个圈,这就意味着第一间房子和最后一间房子是挨着的.每个房子都存放着特定金额的钱.你面临的唯一约束条件是:相邻的房子 ...

  10. angular+bootstrap分页指令案例

    AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angula ...