html中的title属性和alt属性让人有些混淆。

以前不知道有title这个属性,第一次用到它时,就和alt产生了混淆。一位朋友告诉我说,alt是图片img标签里用的,title是超链接里用的, 当时想可能是这样的吧,后来知道这是很不严谨的,alt是图片img标签里用的没错,可是你在img标签里使用title属性,结果一样可以出现效果。

在记事本中分别写三条语句,保存成html进行测试:

<img src="D:\Documents\我的文档\图片收藏\2-02.gif" alt="这是我校的logo"   />

<img src="D:\Documents\我的文档\图片收藏\2-02.gif" alt="这是我校的logo" title="大家好" />

<img src="#" alt="这是我校的logo" title="大家好" />

结果:

第一条语句在ie中输出图像,鼠标放到图像上,会出现“这是我校的logo”,即图像正常显示时,没有title的情况下,显示alt内容。

第二条语句在ie中输出图像,鼠标放到图像上,只出现“大家好”,即有alt和title,只会显示title。

第三条语句在ie中输出图像,ie找不到图像,但是“这是我校的logo”几个字出现在了图像位置。同时,鼠标放到图像位置区,会出现title内容“大家好”的提示。

为了表述得更明白,我从网上找到了一些有用的资料,摘其精要:

alt属性的功能是不能显示图像信息时候的替换文字(即在图片显示的位置上显示文字,说明这个图片的要显示的内容)。Alt属性值的长度必须少于100个英文字符。

title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。

title属性的功能是提示。额外的说明信息和非本质的信息请使用title属性。title属性值可以比alt属性值设置的更长。

title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们
到什么地方,他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息,比如日期或者其他非本质的信息。

title与alt的区别的更多相关文章

  1. 【转】title与alt的区别

    html中的title属性和alt属性让人有些混淆. 以前不知道有title这个属性,第一次用到它时,就和alt产生了混淆.一位朋友告诉我说,alt是图片img标签里用的,title是超链接里用的,当 ...

  2. title及alt提示特效

    <html> <head> <title>title及alt提示特效</title> <style type="text/css&quo ...

  3. title与h1的区别、b与strong的区别、i与em的区别?

    title与h1的区别 定义: title是网站标题, h1是文章主题 作用: title概括网站信息,可以直接告诉搜索引擎和用户这 个网站是关于什么主题和内容的,是显示在网页Tab栏里的: h1突出 ...

  4. <img>的title和Alt有什么区别?

    Alt是<img>的特有属性,是图片内容的等价描述,用于图片无法加载时显示,读屏器阅读图片. title 可提高图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析.鼠 ...

  5. 5.href和src区别? title和alt【CSS】

    1.href (Hypertext Reference)指定网络资源的位置(超文本引用),从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系,在 link和a 等元素 ...

  6. <img>的title和alt有什么区别

    1.title是全局属性之一,用于为元素提供附加的advisory information.通常当鼠标滑动到元素上的时候显示. 2.alt是<img>的特有属性,是图片内容的等价描述,用于 ...

  7. title与h1的区别

    title与h1的联系: 从网站角度看,title更重于网站信息.title可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的. 从文章角度看,h1则是用于概括文章主题.用户进入内容页,想看到的 ...

  8. Android title和actionbar的区别

    我想在一个页面的顶端放入两个按钮,应该用title还是actionbar.他们两个什么区别?分别该什么时候用? 答: android title 是UI上的一小部分,它支持Text和Color,你可以 ...

  9. html中的title和alt

    alt是html标签的属性,而title既是html标签,又是html属性. title标签这个不用多说,网页的标题就是写在<title></title>这对标签之内的.tit ...

随机推荐

  1. AngularJS Directive 隔离 Scope 数据交互

    什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简 ...

  2. 【小贴士】【stringify神BUG】【localstorage失效】【消灭Safari alert框】【是否延迟加载】【页面10px白屏】

    前言 最近碰到几个恶心问题,也发现一点优化技巧,以及对Hybrid知识的一些整理,这里便一并拿出来做分享了,关于Hybrid的调试,会是我今后一个重点 我的博客首先是学习笔记,方便自己做知识沉淀,以后 ...

  3. 【单页应用之通信机制】view之间应该如何通信

    前言 在单页应用中,view与view之间的通信机制一直是一个重点,因为单页应用的所有操作以及状态管理全部发生在一个页面上 没有很好的组织的话很容易就乱了,就算表面上看起来没有问题,事实上会有各种隐忧 ...

  4. php中用foreach改变数组的值的问题

    翻到PHP文档的foreach那页这样写道: “foreach 语法结构提供了遍历数组的简单方式.foreach 仅能够应用于数组和对象,如果尝试应用于其他数据类型的变量,或者未初始化的变量将发出错误 ...

  5. Windows系统变量

    %ALLUSERSPROFILE% : 列出所有用户Profile文件位置. %APPDATA% : 列出应用程序数据的默认存放位置. %CD% : 列出当前目录. %CLIENTNAME% : 列出 ...

  6. addEventListener和attachEvent的区别

    addEventListener共有3个参数,如下所示:element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事 ...

  7. UIImageView

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. /***** ...

  8. Starling中通过PivotX 和 PivotY 修改原点

    一个显示对象的默认原点在左上角.addChild 是将它的左上角放在了父容器的(0, 0)位置. 如果将该显示对象的PivotX 和 PivotY 修改为其宽高的一半,那么它的原点就变到了该对象的中心 ...

  9. 在UTF-8中,一个汉字为什么需要三个字节?

    UNICODE是万能编码,包含了所有符号的编码,它规定了所有符号在计算机底层的二进制的表示顺序.有关Unicode为什么会出现就不叙述了,Unicode是针对所有计算机的使用者定义一套统一的编码规范, ...

  10. Ignite 配置更新Oracle JDBC Drive

           如果使用Oracle 12C 作为Ignite 的Repository的话,在Repository Createion Wizard的配置过程中,会出现ORA-28040:No matc ...