HTML中input标签的alt属性和title属性的比较
经常用到这两个属性,但是一直没有总结他们的区别。现在我对他们两个的用法做一下总结:
相同点:他们都会飘出一个小浮层,显示文本内容。
不同点:
1.alt只能是元素的属性,而title即可以是元素的属性也可以是标签,例如:<title>标题</title>。
2.alt属性则是用来指定替换文字,只能用在img、area和input元素中(包括applet元素),用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意,alt是替代图像作用而不是提供额外说明文字的。根据一些SEO人士的说法,使用alt属性还具有搜索引擎优化效果,因为搜素引擎是无法直接读取图像的信息的,alt可以为其提供文字信息所以对搜索引擎比较友好。
<form action = "targetpage.jsp">
<input type = "text" name = "alt">
<input type = "image" src = "picture.jpg" alt = "点击跳转" width = "50" height = "50">
</form>
而title可以用在任何元素上,把鼠标移动到元素上面,就会显示title的内容,以达到补充说明或者提示的效果。
but,通常人们容易搞错的是title和alt这两个属性同时用于img标签的时候。在旧版本的IE浏览器中,鼠标经过图像时显示的提示文字是alt的内容,而忽略了title属性,这个曾经误导了很多人。因此,如果想在IE中显示title的内容,要么title属性和alt一致,要么alt内容为空(“”,空格也不能有)。不过,在新版的IE(IE8及以上)中,已不会出现这种情况了。
另外,当a标签内嵌套img标签时,起作用的是img的title属性。
HTML中input标签的alt属性和title属性的比较的更多相关文章
- img标签中alt属性与title属性在seo的作用-摘自网友
img标签中alt属性与title属性作用,也许大家比较迷惑,现在给大家举例说明.alt属性是图片的替换文字.title属性规定元素的额外信息,有视觉效果. 目录 alt属性 title属性 ie和f ...
- img标签中alt属性与title属性
alt属性 1.alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户,以及视觉障碍的用户和使用屏幕阅读器的用户.当图片不显示的时候,图片的替换文字.2.alt属性值得长度必须少于100个英 ...
- HTML的img标签:alt属性和title属性
当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆.例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Wind ...
- HTML语言中img标签的alt属性和title属性的作用与区别
alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方,而title属性是在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,有点类似jQuery的h ...
- 关于django中input标签中file类型以及开路由
0825自我总结 关于django中input标签中file类型 1.input提交图片实时展示 <img src="/static/img/default.png" wid ...
- 【HTML】input标签中alt属性和title属性的比较
经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...
- HTML中input标签maxlength属性的妙处
HTML中的input标签可是很常用的. HTML本身也非常简单,就是若干标签,每个标签有若干属性. 我在学习HTML的过程中,也没有太过重视. 今年,在写前端表单验证的时候,发现maxlength这 ...
- IE中input标签密码框与文本框宽度不一样问题
前言 在项目登录界面中有账户和密码的输入框,在Chrome中显示是正常的(本人使用的是Chrome浏览器,平时不用IE).等部署到客户的服务器上,访问时发现一个问题,在IE浏览器中文本框与密码框的宽度 ...
- alt属性和title属性差异---终于分清楚了!
凡是接触过前端的开发者,相信都会接触到<img>标签,自然alt title更是不会陌生,但对他们真正的含义和使用方法,你确定了解吗? 参考: http://www.junchenwu.c ...
随机推荐
- JS在IE和FireFox之间常用函数的区别小结
1.event.srcElement 复制代码 代码如下: //srcElement只能在IE下使用target是FireFox使用的,下面是兼容性写法 var obj = e.srcElement ...
- 为什么MVC不是一种设计模式
http://damoqiongqiu.iteye.com/blog/1949256 ---比较Backbone和Ext4.x在MVC实现上的差异 大漠穷秋 前言 圣人云:不想做妈咪的小姐不是好码农. ...
- webstorm使用技巧
WebStorm快捷键收集:模式visual studio 代码提示:ctrl + alt + 空格 代码补全:alt + / 代码换行:ctrl + shift + 上下箭头 重新运行:ctrl + ...
- 数据结构:C_顺序栈的实现
数据结构顺序栈的实现(C语言版) 1.写在前面 栈是一种遵循元素先进(Push)后出(Pop)规则的线性表,它的实现可以用数组或者链表. ..... 2.代码分解 2.1对栈的结构定义: typede ...
- ASP.NET 路由解析
这段时间在读园子里Artech大神的<ASP.NET MVC5框架揭秘>,慢慢地从底层了解了MVC模式的设计思路.下面是一些阅读的总结. 传统的Web Forms应用,URL指向的是具体的 ...
- 解决Myeclipse下Debug出现Source not found以及sql server中导入数据报错
前言:在空间里回顾了我的2014,从生活.技术.家庭等各方面对自己进行总结剖析,也是给自己一个交代.也想在博客上专门写一篇2014年度菜鸟的技术路回忆录,但是因为各种事一再耽搁了,现在来写也就更显得不 ...
- javascript学习总结(一):基础知识。
1 数据类型a.数据类型共有7种,字符串(string).数字(number).布尔(boolean).数组(array).对象(object).Null.Undefined. 其中布尔(逻辑)类型只 ...
- QT学习笔记3
对话框 新建了一个对话框,在新建项目选择类型时是Dialog即可. 添加的代码如下,注意QCheckBox 并没有添加头文件定义,只是加了类的前向声明.因为我们仅仅使用的是指针,并不涉及到这些类的函数 ...
- [Core] .NET Core & VS Code 之路(1) Hello World
目录 相关链接 dotnet命令 VS Code Hello World Web Hello World 总结 其实本篇上个月已经写好, 只是 但是,不忘初心方得始终 相关链接 Learn .NET ...
- 重构:用Command替换条件调度程序
注:该随笔受启发于 <重构与模式> 第七章 第7.6小节 用Command替换条件调度程序 . 对于Command不做过多解释,这里我找了两个例子.供部分园友参阅:Command例子1 ...