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

img标签中alt属性与title属性作用,也许大家比较迷惑,现在给大家举例说明。1111

alt属性

1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户,以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候,图片的替换文字。
2、alt属性值得长度必须少于100个英文字符
3、alt属性是img标签的必须属性,如果没有特别意义的图片,可以写alt=""
4、alt属性是搜索引擎判断图片与文字是否相关的重要依据,alt属性添加到img主要的目的才是为了SEO

title属性

1、title属性并不是必须的。
2、title属性规定元素的额外信息,有视觉效果,当鼠标放到文字或是图片上时有文字显示。
3、title属性并不作为搜索引擎抓取图片的参考,更多倾向于用户体验的考虑。

ie和firefox下展示

hdwiki百科

图片1源码为:<img title="hdwiki" alt="hdwiki百科" src="http://a4.att.hudong.com/18/06/19300000013045130284066992061_950.jpg">

hdwiki百科

图片2源码为:<img alt="hdwiki百科" src="http://a4.att.hudong.com/18/06/19300000013045130284066992061_950.jpg">

1、在ie下,图片1摸上去显示“hdwiki”,图片2摸上去显示“hdwiki百科”
2、在firefox下,图片1摸上去显示hdwiki,图片2摸上去什么也不显示。

说明的问题:
1、在ie下,没有title时,alt 有title属性的作用
2、在ie下,同时存在title,alt属性时,鼠标滑过的优先显示级别,title要高于alt
3、IE浏览器给了大家一个误导,在IE中ALT会变成title属性的文字提示是因为IE不标准。这一点Firefox做的就比较好。

最新文章

  1. ASP.NET Razor - C# 逻辑条件
  2. HTML与CSS基础知识补遗(一)
  3. ubuntu apache2服务器配置
  4. paper 6:支持向量机系列三:Kernel —— 介绍核方法,并由此将支持向量机推广到非线性的情况。
  5. android service 学习
  6. C# 使用 AutoResetEvent 或 ManualResetEvent 同步两个线程
  7. FolderBrowserDialog组件选择文件夹
  8. spring+springMVC集成(annotation方式)
  9. Swift和C#的基本语法对比
  10. Linus Torvalds来自开发商的消息:成就,不定
  11. sed用法小结
  12. 浅谈mmap()和ioremap()的用法与区别
  13. shell脚本之算术运算和逻辑运算
  14. 正则化方法:L1和L2 regularization、数据集扩增、dropout(转)
  15. 异常-----freemarker.template.TemplateException: Macro select has no such argument
  16. 机器学习入门之sklearn介绍
  17. k8s环境清理
  18. 28.Mysql权限与安全
  19. html5 canvas旋转+缩放
  20. O2O(online to offline)营销模式

热门文章

  1. Mysql利用存储过程插入500W条数据
  2. Python3基础 逻辑运算 and or not 示例
  3. DD-WRT自定义脚本更新花生壳DDNS
  4. ubuntu16.04下无线网卡无法正常连网
  5. POJ 2373 Dividing the Path (单调队列优化DP)题解
  6. HDU1698 Just a Hook(线段树&amp;区间覆盖)题解
  7. IIS中添加ftp站点
  8. 命令模式(head first 设计模式5)
  9. 51nod 1693 水群(神奇的最短路!)
  10. 关于ExtJS Row editing 行编辑 后 获取 编辑后记录值 的方法