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

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

不同点:

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属性的比较的更多相关文章

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

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

  2. img标签中alt属性与title属性

    alt属性 1.alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户,以及视觉障碍的用户和使用屏幕阅读器的用户.当图片不显示的时候,图片的替换文字.2.alt属性值得长度必须少于100个英 ...

  3. HTML的img标签:alt属性和title属性

    当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆.例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Wind ...

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

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

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

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

  6. 控制input标签中只能输入数字以及小数点后两位

    js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...

  7. 关于django中input标签中file类型以及开路由

    0825自我总结 关于django中input标签中file类型 1.input提交图片实时展示 <img src="/static/img/default.png" wid ...

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

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

  9. img标签中alt和title属性的正确使用

    在的img标签有两个属性分别为alt和title,对于很多初学者而言对这两个属性的正确使用都还抱有迷惑,当然这其中一部分原因也是ie浏览器所导致的.正确的使用这两个属性除了可以提高图片的搜索能力外,在 ...

随机推荐

  1. $#65279导致页面body会出现一个空白行

    模板文件生成html文件之后会在body开头处加入一个可见的控制符&#65279,导致页面头部会出现一个空白行.原因是页面的编码是UTF-8 + BOM. 直接notopad++ 保存为无BO ...

  2. Mathematica 文本界面获得之前的结果

    使用%号做标记.获得文本界面之前的运算结果:

  3. AS-->创建项目(慢)和打开项目(慢)等需要注意的问题

    Android Studio 创建新项目的时候,会在进度条的界面滞留很久. 有时候一天都卡在这. 打开其它项目有些时候,也会出现这种情况. 主要的原因就是, 此过程正在 下载对应版本的 gradle. ...

  4. 第八周(3) Word2007样式

    第八周(3) Word2007样式 教学时间 2013-4-19 教学课时 2 教案序号 23 教学目标 1.掌握样式的概念2.能够熟练地创建样式.修改样式的格式,使用样式3.熟练利用样式格式化文档 ...

  5. Java和Javac的使用时总提示找不到类模块的解决方案

    1.场景: 争对网上的很多文章中javac编译与java运行的文章,有很多不明确的地方,使得在合适时发现很多坑.这里给大家作下简介. 2.Javac的使用注意: javac -d ./ ./Insta ...

  6. Python 模块浅析

    如果你退出Python解释器重新进入,以前创建的一切定义(变量和函数)就全部丢失了.因此,如果你想写一些长久保存的程序,最好使用一个文本编辑器来编写程序,把保存好的文件输入解释器. 我们称之为创建一个 ...

  7. intellij idea 插件安装、卸载

    windows 下 intellij idea 插件安装.卸载   安装(在线安装): 根据图一.图二所示(蓝色标记) 卸载: 根据图一所示(橙色标记) 启用.关闭插件: 根据图一所示(绿色标记) 安 ...

  8. web.xml关于spring的讲解

    <context-param>的作用: web.xml的配置中<context-param>配置作用 . 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件w ...

  9. 很赞的idea教程

    感谢: http://pan.baidu.com/s/1dDEaVxn

  10. 二、Django用Eclipse编写一个登录界面

    一.Django用Eclipse编写一个登录界面 二.Django用Eclipse编写一个登录界面Ajax和Django交互 各软件版本:Python 2.7.14,django 1.6.11 原来已 ...