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

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

不同点:

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语言中img标签的alt属性和title属性的作用与区别

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

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

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

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

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

  7. HTML中input标签maxlength属性的妙处

    HTML中的input标签可是很常用的. HTML本身也非常简单,就是若干标签,每个标签有若干属性. 我在学习HTML的过程中,也没有太过重视. 今年,在写前端表单验证的时候,发现maxlength这 ...

  8. IE中input标签密码框与文本框宽度不一样问题

    前言 在项目登录界面中有账户和密码的输入框,在Chrome中显示是正常的(本人使用的是Chrome浏览器,平时不用IE).等部署到客户的服务器上,访问时发现一个问题,在IE浏览器中文本框与密码框的宽度 ...

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

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

随机推荐

  1. java中finally和return的执行顺序

    注意:return的位置... 从这几个例子中可以看到,如果try之前没有有条件的return,则try..catch..finally语句块中的语句都是顺序执行(如果try中或者catch中 有re ...

  2. poj3422 Kaka's Matrix Travels(最小费用最大流问题)

    /* poj3422 Kaka's Matrix Travels 不知道 k次 dp做为什么不对??? 看了大牛的代码,才知道还可以这样做! 开始没有理解将a 和 a‘ 之间建立怎样的两条边,导致程序 ...

  3. Bjarne Stroustrup对C++程序员的忠告

    转自:http://blog.csdn.net/adm_qxx/archive/2007/05/20/1617488.aspx  第1章 致读者  [1] 在编写程序时,你是在为你针对某个问题的解决方 ...

  4. 【Java基础】方法

    Num1:检查参数的有效性 绝大多数的方法和构造器对于传递给它们的参数值都会有某些限制.比如:索引值必须是非负数,对象引用不能为null等等.这些都很常见,你应该在文档中清楚地指明所有这些限制,并在方 ...

  5. android布局文件中android:icon="?attr/menuIconCamera"找不到对应图标路径

    如 <item android:id="@+id/camera" android:title="Camera" android:icon="?a ...

  6. 跨域http头

    php:header("Access-Control-Allow-Origin: *"); asp.net:Response.AppendHeader("Access-C ...

  7. Elasticsearch聚合初探——metric篇

    Elasticsearch是一款提供检索以及相关度排序的开源框架,同时,也支持对存储的文档进行复杂的统计--聚合. 前言 ES中的聚合被分为两大类:Metric度量和bucket桶(原谅我英语差,找不 ...

  8. nodejs学习笔记二——链接mongodb

    a.安装mongoose库用来链接mongodb数据库 安装mongodb数据库参考mongodb安装 前言(怨言) 本来是想安装mongodb库来链接mongodb的,命令行到nodejs工程目录: ...

  9. JVM之类加载器中篇

    先看一段代码吧! package com.tfdd.test; /** * @desc * @author chenqm * @date 2016年2月15日 */ public class Fina ...

  10. 怎么让composer加速

    composer install 为什么这么慢? 下面是一个composer install(在没有composer cache的情况下)做的所有事情: [vagrant@localhost comp ...