alt和title的区别与用法

alt和title的是我们工作中经常用到这两个属性,但是一直没有总结他们的区别。现在就对他们两个的用法做一下总结。

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

不同点:

1.alt只能是元素的属性,而title即可以是元素的属性也可以是标签,例如:<title>标题</title>。

2.alt属性则是用来指定替换文字,只能用在img、area和input元素中(包括applet元素),用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意,alt是替代图像作用而不是提供额外说明文字的。根据一些SEO人士的说法,使用alt属性还具有搜索引擎优化效果,因为搜素引擎是无法直接读取图像的信息的,alt可以为其提供文字信息所以对搜索引擎比较友好。

而title可以用在任何元素上,把鼠标移动到元素上面,就会显示title的内容,以达到补充说明或者提示的效果。

但是,通常人们容易搞错的是title和alt这两个属性同时用于img标签的时候。在旧版本的IE浏览器中,鼠标经过图像时显示的提示文字是alt的内容,而忽略了title属性,这个曾经误导了很多人。因此,如果想在IE中显示title的内容,要么title属性和alt一致,要么alt内容为空(“”,空格也不能有)。不过,在新版的IE(IE8及以上)中,已不会出现这种情况了。
另外,当a标签内嵌套img标签时,起作用的是img的title属性。

时间: 2024-10-16 10:30:28

alt和title的区别与用法的相关文章

图片标签img中alt与title的区别

大家可以来做测试:把以下代码保存的文本中,命名为*.html结尾的文件,然后分别用不同浏览器打开. 代码: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head><title>图片标签img中al

img alt与title的区别

前端 alt是图片加载不出来时候,对图片的文本替代 title 是鼠标放在图片上时,对图片的进一步说明 seo 搜索引擎对图片意思的理解主要靠 alt 原文地址:https://www.cnblogs.com/yigexiaojiangshi/p/8463806.html

alt text 与 tooltip区别

在做工具的Accessiblity测试时, 对于image对象,一直分不清它的alt属性与tooltip属性的区别与用法, 从网上查了下, 比较认同这样的观点: alt属性: alternative text, 是在浏览器不能显示图像的时候用来代替图像而显示的文字.本质上讲,用户看到的要么是图像,要么是alt文字,但是用户不能即看到图片,又看到它的替代文字. tooltip属性:用于对图像进行补充说明的文字, 用户将鼠标移动到图像上, 鼠标附近跳出一段描述性的文字. 用法: 使用alt属性来显示

图片img标签alt与title属性评测实验

图片img标签alt与title属性评测实验 SEO优化是慢工也是细活.细节做的好,如鱼得水,做的不好,举步维艰.做SEO优化的都知道,搜索引擎对图片理解是通过alt属性,所以在图片alt属性中用包含关键字的简要文字说明,也是页面优化的一部分.如果想要做的更好,可以在title属性里,进一步对图片说明,相关知识点SEO优化在<图片优化方法|百度图片优化>文章里有详细说明.今天SEO优化就和大家分享图片img标签alt与title属性评测实验. 图片img标签alt与title属性评测实验代码

div与span区别及用法

DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候,遇到第一个问题是div与span有什么区别,什么时候用div,什么时候用span标签. 目录 特点与区别 小结 知识扩展 案例效果演示 一.DIV与SPAN的区别与特点   -   TOP 以下是在没有对开发网页页面设置css样式时候情况下,系统默认情况下的介绍div与span区别div占用的位置是

Struts2中的ActionContext和ServletActionContext的区别和用法

今天学习Struts2的时候遇到"访问和添加属性"的问题,然后就学到了ActionContext和ServletActionContext之间的区别和用法,然后又在网上搜了下别人的文章大致了解了一下,就想着总结一下. 参考文章1:http://www.cnblogs.com/tanglin_boy/archive/2010/01/18/1650871.html 参考文章2:http://blog.csdn.net/woshixuye/article/details/8172777 相信

JS批量替换内容中关键词为超链接,避开已存在的链接和alt、title中的关键词

懂点seo的人都知道要给内容中关键词加上链接,形成站内锚文本链接,这对seo有很大的帮助. 思路就是在数据库中录入若干个关键词和关键词对应的链接,当然链接可以根据关键词的id自动生成,或者直接用关键词作为链接参数,如?tag=1.?kw=关键词. 这个问题不是简单的一个批量replace那么简单,要考虑到已经存在的超链接,不能将里面的文字再次替换为超链接,还有就是图片的alt属性,或者其他标签的title属性,里面的文字也不该被替换. 见下面的HTML代码: [<a href="http:

.NET中的三种Timer的区别和用法(转)

最近正好做一个WEB中定期执行的程序,而.NET中有3个不同的定时器.所以正好研究研究.这3个定时器分别是:  //1.实现按用户定义的时间间隔引发事件的计时器.此计时器最宜用于 Windows 窗体应用程序中,并且必须在窗口中使用.  System.Windows.Forms.Timer  // 2.提供以指定的时间间隔执行方法的机制.无法继承此类.  System.Threading.Timer  //3.在应用程序中生成定期事件.  System.Timers.Timer  这三个定时器位

Linux 环境下/etc/profile和/etc/profile.d 的区别和用法

Linux 环境下/etc/profile和/etc/profile.d 的区别和用法 1. 两个文件都是设置文件的,/etc/profile是永久性的,是全局变量,/etc/profile.d/设置所有用户生效. 2. /etc/profile.d/比/etc/profile好维护,不想要什么变量直接删除/etc/profile.d/下对应的即可,不用像/etc/profile需要改动此文件. CentOS 中每个用户都要指定各自的,其中包括可执行的 path路径,这些路径决定了每个用户在执行