alt和title的是我们工作中经常用到这两个属性,但是一直没有总结他们的区别。现在就对他们两个的用法做一下总结。

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

不同点:

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

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

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

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

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

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

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

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

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

  3. alt和title的区别

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

  4. img alt与title的区别

    前端 alt是图片加载不出来时候,对图片的文本替代 title 是鼠标放在图片上时,对图片的进一步说明 seo 搜索引擎对图片意思的理解主要靠 alt

  5. img元素的alt和title的区别?

    alt是图片加载失败时显示在网页上的提示信息: title是鼠标放上面时显示的文字(图片加载失败鼠标放显示的代替文字上时仍然会显示提示信息): 除此之外,alt是img的必要属性,只能用在img.ar ...

  6. html中 alt 和 title 的区别

    alt 用来给图片来提示的(图片载入失败时以文本形式提示). Title用来给链接文字或普通文字提示的(在鼠标放上去的时候就会提示).

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

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

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

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

  9. alt text 与 tooltip区别

    在做工具的Accessiblity测试时, 对于image对象,一直分不清它的alt属性与tooltip属性的区别与用法, 从网上查了下, 比较认同这样的观点: alt属性: alternative ...

随机推荐

  1. 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

    接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...

  2. winform无边框窗口拖动

    无边框的窗口想拖动,只需要在置顶的容器上添加对应的mousedown 和 mousemove 事件就可以实现了.代码如下: //拖动窗口 private Point mPoint = new Poin ...

  3. 使用NetronGraphLib类库开发Qfd质量屋编制工具

    前言 可执行文件下载 QfdHouse-exe.zip 因项目需要做了一个质量功能配置(Quality Function Deployment 简称Qfd)的质量屋编制工具软件,本软件是在发布一个免费 ...

  4. swfit - 实现类似今日头条顶部标签和底部内容的动态解决方案

    TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...

  5. Oracle 只导出某个用户下的表及数据

    今天某大牛问我要之前我参与的一个系统的代码及库,我捣鼓下,发给了他. 他很诧异的问:这个库有这么大么 我说 因为当时是专门新建了一个实例,用户也是系统用户,所以导出的时候是导出的整个数据库 他 ZZ ...

  6. 开涛spring3(9.3) - Spring的事务 之 9.3 编程式事务

    9.3  编程式事务 9.3.1  编程式事务概述 所谓编程式事务指的是通过编码方式实现事务,即类似于JDBC编程实现事务管理. Spring框架提供一致的事务抽象,因此对于JDBC还是JTA事务都是 ...

  7. (数字IC)低功耗设计入门(三)——系统与架构级

    前面讲解了使用EDA工具(主要是power compiler)进行功耗分析的流程,这里我们将介绍在数字IC中进行低功耗设计的方法,同时也结合EDA工具(主要是Design Compiler)如何实现. ...

  8. pycharm5工具免费分享及安装教程

    好东西,就要分享,最近在捣鼓Python,所以就找个pycharm5工具,感觉挺好用的. 废话不多说了,所见即所得: 百度云盘分享:http://pan.baidu.com/s/1sk9k4Nj 密码 ...

  9. 解决R语言临时文件目录的问题(tempdir、tempfile)

    最近在调用SparkR的时候,当用copy_to函数将R中的数据框导入到Spark时,会在默认的tempdir()目录下(这里默认目录即为/tmp)产生巨大的临时文件, 严重影响R脚本的运行,最终一番 ...

  10. css3中强大的filter(滤镜)属性

    CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...