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. [翻译]用 Puppet 搭建易管理的服务器基础架构(2)

    我通过伯乐在线翻译了一个Puppet简明教程,一共分为四部分,这是第二部分. 原文地址:http://blog.jobbole.com/87680/ 本文由 伯乐在线 - Wing 翻译,黄利民 校稿 ...

  2. Logging configuration

    The Play logger is built on Log4j. Since most Java libraries use Log4j or a wrapper able to use Log4 ...

  3. PHP预定义变量

    * PHP预定义 * 预定义变量 * $_GET - 接收客户端以请求类型为GET方法发送的数据内容 * $_POST - 接收客户端以请求类型为POST方法发送的数据内容 * $_REQUEST - ...

  4. 如何合理优化WEB前端 高效提升WEB前端性能

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

  5. IE6/IE7中li底部4px空隙的Bug

    当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. 代码如下: <ul class="list"> < ...

  6. IBM实习

    来到北京,进入IBM实习已经好多天了,两个月的暑假,两个月夏日在这里度过了,并将在未来个一个月里面,仍将在这里走过,但是我却一无所成,现在仍然只在徘徊中游走,丹迪什么时候能真正懂得实习的难得可贵,懂得 ...

  7. iOS 学习 - 21 系统自带解析 XML

    准备工作: new -> file -> other -> Empty ,在 Save As: 中随便起个名字后缀为 .xml 拷贝下面 <person> <stu ...

  8. 深圳 Maker Faire 2016 & Microsoft Booth

    首先,感谢Hackster.io和微软,因为发表在Hackster.io的项目<A fall detection system based on Arduino, Windows and Azu ...

  9. 看懂Oracle执行计划

    最近一直在跟Oracle打交道,从最初的一脸懵逼到现在的略有所知,也来总结一下自己最近所学,不定时更新ing- 一:什么是Oracle执行计划? 执行计划是一条查询语句在Oracle中的执行过程或访问 ...

  10. MySQL优化概述

    一. MySQL优化要点 MySQL优化是一门复杂的综合性技术,主要包括: 1 表的设计合理化(符合 3NF,必要时允许数据冗余) 2.1 SQL语句优化(以查询为主) 2.2 适当添加索引(主键索引 ...