在前端开发中,经常遇到有人在问图片的alt属性和title属性的区别,这是因为很多人对于alt属性和title属性没有彻底搞明白,今天零度给大家分析分析。

title属性

首先,来看一下什么是title属性,在我们平时浏览网页的时候,我们经常会看到,当把鼠标放在一个文字链接上时,会弹出一段说明信息,这种提示信息就是通过title属性设置的。而不光文字链接有title属性,图片也可以设置title属性,title属性的作用就是提示的作用。

所以图片的title属性是提示作用,而这个提示作用是不管图片是否存在都会显示。

alt属性

图片的alt属性则是起到替代文字的作用,当图片不存在或者载入出错时候,那么该文字才会显示,以提高用户体验。值得注意的是在IE6浏览器下,如果一个图片没有title属性,有alt属性,鼠标放在图片上也会有title属性那样的效果(都有提示信息),不过这个是因为IE6浏览器的解析问题,在标准浏览器下就不会出现那样的情况了。

至此,大家应该明白title属性和alt属性的区别了吧,title属性什么时候都会显示,而alt属性只有在图片加载不出来的时候才会显示。

图片的title属性和alt属性的区别的更多相关文章

  1. 浅谈title属性与alt属性

    XHTML是CSS布局的基础,webjx.com一直强调XHTML知识的学习,重视语义和文档的结构.title 和alt 属性,给我最直观的感受就是,可以提高文档的适应性,并合理提高关键词密度.在XH ...

  2. HTML中input标签的alt属性和title属性的比较

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

  3. 【HTML】input标签中alt属性和title属性的比较

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

  4. HTML img标签的width height ismap usemap title alt 属性

    前言 img 元素向网页中嵌入一幅图像 今天特地对 img 的几个属性做了一下测试,在这里做一个笔记. 1. img 元素的width属性和height属性. (1)不设置 width 和 和 hei ...

  5. 【转】图片IMG标记的alt属性和title属性的使用

    alt text 替 换文字(alt text)是为了给那些不能看到你文档中图像的浏览者提供文字说明.这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器 ...

  6. 图片标签img中,为什么使用alt属性没用

    alt属性 alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的.所以alt属性的本意是用于替换图像,而不是为图像提供额外说明的,但是,在ie浏览器中,alt属性会变成文字提示,这本身是一 ...

  7. alt属性和title属性差异---终于分清楚了!

    凡是接触过前端的开发者,相信都会接触到<img>标签,自然alt title更是不会陌生,但对他们真正的含义和使用方法,你确定了解吗? 参考: http://www.junchenwu.c ...

  8. img标签中alt属性与title属性在seo的作用-摘自网友

    img标签中alt属性与title属性作用,也许大家比较迷惑,现在给大家举例说明.alt属性是图片的替换文字.title属性规定元素的额外信息,有视觉效果. 目录 alt属性 title属性 ie和f ...

  9. HTML语言中img标签的alt属性和title属性的作用与区别

    alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方,而title属性是在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,有点类似jQuery的h ...

随机推荐

  1. PostgreSQL 批量生成数据

    create table user_info(userid int,name text,birthday date,crt_time timestamp without time zone,); in ...

  2. 原生js实现发送验证码

    var form = { myfun:function(){ var el = form.config().el; var button = form.config().button; var tim ...

  3. DNA Sequence POJ - 2778 AC 自动机 矩阵乘法

    定义重载运算的时候一定要将矩阵初始化,因为这个调了一上午...... Code: #include<cstdio> #include<algorithm> #include&l ...

  4. Git 内部原理 - (1)底层命令和高层命令 (2Git 对象

    文章摘选自git官网,这里复制下来表示我已阅读并学习过一次这些内容: 无论是从之前的章节直接跳到本章,还是读完了其余章节一直到这——你都将在本章见识到 Git 的内部工作原理和实现方式. 我们发现学习 ...

  5. idea+spring4+springmvc+mybatis+maven实现简单增删改查CRUD

    在学习spring4+springmvc+mybatis的ssm框架,idea整合简单实现增删改查功能,在这里记录一下. 原文在这里:https://my.oschina.net/finchxu/bl ...

  6. qduoj~前端~二次开发

    青岛大学qdu的onlinejudge是js的写的前端,框架是vue.js,在nodejs上部署运行,其实整体运行还是建立在docker的容器虚拟环境里,这里暂时不需要docker.安装环境是Ubun ...

  7. python etree.HTML

    1.编码问题(编码参数 parser): resp_html = etree.HTML(res,parser=etree.HTMLParser(encoding='gbk')) 2.大小写问题(大写转 ...

  8. Vue+ElementUI: 手把手教你做一个audio组件

    目的 本项目的目的是教你如何实现一个简单的音乐播放器(这并不难) 本项目并不是一个可以用于生产环境的element播放器,所以并没有考虑太多的兼容性问题 本项目不是ElementUI的一个音频插件,只 ...

  9. [SDOI2011]消防(树的直径)

    [SDOI2011]消防 题目描述 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超越宇宙的热情, ...

  10. 作诗(si)[分块]

    题目描述 神犇SJY虐完HEOI之后给傻×LYD出了一题: SHY是T国的公主,平时的一大爱好是作诗. 由于时间紧迫,SHY作完诗之后还要虐OI,于是SHY找来一篇长度为N的文章,阅读M次,每次只阅读 ...