img标签中alt属性和title属性的区别（img标签的alt属性与title属性区别）

25-02-16 18

最近很多小伙伴都在问img标签中alt属性和title属性的区别和img标签的alt属性与title属性区别这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展form标签中id和na

最近很多小伙伴都在问img标签中alt属性和title属性的区别和img标签的alt属性与title属性区别这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展<转载>form标签中id和name属性的区别、alt属性和title属性、alt属性和title属性_CSS/HTML、Alt标签和Title标签的区别在和使用讲解等相关知识，下面开始了哦！

本文目录一览：

img标签中alt属性和title属性的区别（img标签的alt属性与title属性区别）
<转载>form标签中id和name属性的区别
alt属性和title属性
alt属性和title属性_CSS/HTML
Alt标签和Title标签的区别在和使用讲解

img标签中alt属性和title属性的区别（img标签的alt属性与title属性区别）

　　alt属性和title属性的相同点和区别

　　相同之处：它们都会出现一个小浮层，显示图片相关的内容

　　不同之处如下所示

　　alt属性的特点：

　　①倘若图片加载不成功未能显示出来，就会在图片未显示的地方出现一段文字。这一作用是为了给未加载出来的图片提供信息，方便用户浏览网页，同时也方便开发人员维护网页。

　　②搜索引擎可以通过这个属性的文字描述获取图片

　　title属性的特点：

　　title属性可以用在任何元素上，当用户把鼠标移动到元素上时，就会出现title的内容，起到对图片说明的作用，其实质就是对图片的一种备注或者注释

　　通俗来讲，alt属性的实质是通过文字来代替图片的内容，而title属性的实质是对图片的描述或者注释。

　　总结：无论图片是否正常显示，图片仅设置title属性，当鼠标悬停图片时，可以看到图片的文字描述。当图片仅设置alt属性时，用鼠标悬停图片之上，可以看到该图片alt属性的替代文字。如果图片同时设置了title属性和alt属性，鼠标悬停时仅显示图片的title属性。以上主要介绍了img标签中alt属性和title属性的区别，比较简单，希望你可以理解

<转载>form标签中id和name属性的区别

HTML元素的ID和Name属性的区别

一直认为ID和NAME是一样的，两个又可以一起出现，甚是疑惑。

今天BAIDU了一下，才发现里面大有文章。发出来研究研究：

最classical的答案：ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的。
     显然这个ID和Name的解答说的太笼统了，当然那个解释对于ID来说是完全对的，它就是Client端HTML元素的Identity。而Name其实要复杂的多，因为Name有很多种的用途，所以它并不能完全由ID来代替，从而将其取消掉。具体用途有：

    用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
    用途2: HTML元素Input type=''radio''分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。
    用途3: 建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用Name，如：<a name="PageBottom"></a>，我们就获得了一个页面锚点。
    用途4: 作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。
    用途5: 在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。
    用途6: 某些特定元素的属性，如attribute，meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。

    显然这些用途都不是能简单的使用ID来代替掉的，所以HTML元素的ID和Name的却别并不是身份证号码和姓名这样的区别，它们更本就是不同作用的东西。

<input name= "xx ">    会提交数据
<input id= "xx ">    不会提交数据

<input id= "xx " name= "yy ">
<label for= "xx "> Label </label>    这里的for属性必须是指向一个id，否则没效果

<input name= "xx " type= "radio " value= "1 ">
<input name= "xx " type= "radio " value= "2 ">
<input name= "xx " type= "radio " value= "3 ">
这里必须name相同才能成为一组单选按钮，而id则没有这个功能。

<input name= "xx ">    对应脚本document.getElementsByName( "xx ")[0]
<input id= "xx ">          对应脚本document.getElementByIdx_x( "xx ")

区别还很多，不一一说了。反正这是两个完全不同的属性。不要混为一谈。

alt属性和title属性

首发：http://blog.handsbrain.com/junchen/archive/2005/05/21/3355.aspx
版权：本文版权归译者Junchen所有，转载请先联系译者。
当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事，他们可能会造成一些问题，或者至少产生了混淆。例子之一就是一些浏览器处理alt属性（一般会被错误的称作alt标签）的方式，比如拥有大量用户的Windows的IE浏览器。

替换文字（alt text）并不是用来做提示（tool tip），或者更加确切的说，它并不是为图片提供额外说明信息的。相反地，title属性才应该用来为元素提供额外说明信息。这些信息在大部分图像浏览器里显示为提示（tool tip），虽然制造商可以任意采取其他方式渲染title属性的文字。

很多人看来对这两个属性感到迷惑（最近这个问题在Web Standards Group邮件列表里变多了），所以我写下我的想法，如何去用它们。

alt属性

为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。
来源：How to specify alternate text.

Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。比如：<input type="image" src="image.gif" alt="Submit" />.

使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。

在写替换文字前仔细想想，保证那些文字确实为那些看不到图像的人提供了说明信息，并且在上下文中有意义。对于那些装饰性的图片可以使用空的值（alt=""，引号中间没有空格），而不是使用不相关的替换文字比如“blue bullet”或者“spacer.gif”。不要忽略它，如果你忽略了，那么一些屏幕阅读器会直接阅读图像文件的文件名，那些文字浏览器，比如Lynx会显示图像文件的文件名，而那对于你的浏览者就没什么用了。

包含文字的图像图片设置替换文字是最简单的，图像中包含的文字一般来说就可以作为alt属性值。

至于替换文字的长度，看看WCAG 2.0（网站内容可用性指南2.0）是怎么说的：

Alt属性值得长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
我把它理解为“尽可能短，尽需要长”。

即使你想让它显示为提示（tool tip），也不要给文字元素使用alt属性，这并不是它的用法。至今据我所知，那样做仅能在Windows的IE浏览器和古老的Netscape 4.*（windows版本）有效。没有一个Mac的浏览器会将它显示为提示（tool tip）。

当浏览器把替换文字显示为提示（tool tip）后，那些错误使用alt属性的行为也受到了鼓励。一些人开始写无意思的替换文字，因为他们趋向于认为它是一个额外的说明信息，而不是不能显示图像的替换。其他人可能不想让提示（tool tip）出现，然后就完全忽略了写alt属性值。这些错误的做法，都给那些不能看到图像的浏览者造成了困难。

额外的说明信息和非本质的信息请使用title属性。

title属性

title属性为设置该属性的元素提供建议性的信息。
来源: The title attribute.

title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。可能这正是为什么很多人不明白何时使用它。

使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息（tool tip），然而这又由制造商来决定如何渲染title文字。一些浏览器会将title文字显示在状态栏里。比如早期版本的Safari浏览器。

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

title属性值可以比alt属性值设置的更长。不过要注意的是，有些浏览器会截断过长的文字（比如工具提示或其他）。比如Mozilla核心的浏览器只能显示最先的60个字符。这被认为是一个Mozilla bug，这是你要注意的。

使用前先考虑

我的建议是保证替换文字（alt text）精要。在大多数的应用里，都应该被留白，alt=""（注意两引号中没有空格）。想想那些图像，为那些浏览者提供了什么样的信息，你应该用什么文字去描述它，或者你该为看不到图像的人提供什么信息？将替换文字写成“照片：站在大楼外的CEO，穿着灰色西装和黑色领带，望着天”对于看不到图像的人真的有帮助？如果你觉得是，那么你就写吧。在很多情况下，我觉得让替换文字留白比较好。

对于title属性，比较难于给出严格的使用说明。我大部分用在那些不能自我释意的链接上，比如同一页面上的相同的链接文字，不同的链接页面。有时候也为一些按钮或者表单元素提供更多的说明文字。

更长的描述

当一个图片需要更加长的描述，而超过alt属性的限制，那么还有一些选择。

longdesc属性可以用来提供链接到一个包含图片文字描述的单独页面。这就意味着把浏览者链接到另外的页面，这可能会造成理解上的困难。另外浏览器对于longdesc属性的支持也是不一致的，并且不是非常好。

longdesc属性可以包含一个链接到当前文档的其他部分（锚点）来取代链接到另外的页面。在Accessibility footnotes, Andy Clarke很好的解释说明了如何应用。

描述链接（D links）可以用来补充longdesc。一个描述链接就是一个常规的链接，连接到含有替换文字的页面。该链接被置于图像的旁边，并且在所有浏览器中都是可是的。对于它的有效性人们有很多不同意见，我的个人意见不大喜欢这个注意。WCAG也是，在他们的工作草案HTML Techniques for WCAG 2.0中，描述链接是被“不赞成”的。

如果对图片的长的描述对于任何浏览者都有用，那么你得考虑让它简单的显示在同一个文档里面，而不是链接到其他页面里或者藏起来。这样每个人都可以阅读到。这是一种简单低技术含量的方法。

更多信息

想了解更多关于alt,title和longdesc属性？看这里：

Guidelines on alt texts in img elements
Writing good ALT text
Accessible alternatives
Accessibility footnotes
The image problem
Title Attribute – Your Take
Using link Titles to Help Users Predict Where They Are Going
How to specify alternate text
The title attribute

您可能感兴趣的文章:

niceTitle 基于jquery的超链接提示插件
javascript title闪动效果
永不消失的title提示代码
截获网站title标签之家内容的例子
jquery实现网站超链接和图片提示效果

alt属性和title属性_CSS/HTML

很多人看来对这两个属性感到迷惑（最近这个问题在Web Standards Group邮件列表里变多了），所以我写下我的想法，如何去用它们。

alt属性

为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。
来源：How to specify alternate text.

Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。比如：.

包含文字的图像图片设置替换文字是最简单的，图像中包含的文字一般来说就可以作为alt属性值。

至于替换文字的长度，看看WCAG 2.0（网站内容可用性指南2.0）是怎么说的：

Alt属性值得长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
我把它理解为“尽可能短，尽需要长”。

额外的说明信息和非本质的信息请使用title属性。

title属性

title属性为设置该属性的元素提供建议性的信息。
来源: The title attribute.

使用前先考虑

更长的描述

当一个图片需要更加长的描述，而超过alt属性的限制，那么还有一些选择。

longdesc属性可以包含一个链接到当前文档的其他部分（锚点）来取代链接到另外的页面。在Accessibility footnotes, Andy Clarke很好的解释说明了如何应用。

更多信息

想了解更多关于alt,title和longdesc属性？看这里：

Alt标签和Title标签的区别在和使用讲解

Alt标签：主要是对图片起注释作用的，因为目前搜索引擎的蜘蛛程序对图片的判断能力还不够，所以这里给图片加上Alt，可以起到给图片命名的作用，让搜索引擎更清楚某一幅图片的意思。

对于用户来讲，如果某一幅图片的URL出错或由于网络的原因打不开，如果该图片有Alt标签，那么，图片出错的位置则会显示该图片的Alt注释内容，这样多用户体验也起到了一定的作用。

Alt标签,Title标签

Title标签：主要是对链接起到注释或者加强的作用，这里可能会有朋友会问到：“链接本来就是文字，为什么还要进行加强呢？”。其实很多时候我们在调用某一篇内容页面的标题的时候，由于页面的排版或美观，可能只会显示该内容页面的一部分标题文字，那么，这个时候给这个链接做上Title，搜索引擎或者用户对这个链接的理解是不是会更好点呢。

由于搜索引擎是看网页的源代码的，如果在链接或图片中加上Title或Alt标签，这样对某一个关键密度的提升也有一定的帮助（切忌别故意借助这两个标签来增加某一关键词的密度）。

如果某一个图片也是带链接的，Title和Alt这两个标签应该如何处理呢？

这里只是两者都放到一起了而已，前面我们分析都是单独分开的，网站中某一图片带链接的现象很多，比如一些商城类或产品介绍类的网页。建议：

1、图片做上Alt标签：大家可以想下，如果给图片做上了Alt，那么，结合上面两个标签的注释，这时候搜索引擎就会明白这张图片的意思，我们索性把这个图片链接看成文字链接好了（因为已经给图片做上了Alt标签），这个时候，我们再结合Title标签的使用就可以了。

2、链接的Title标签可做可不做：前面我们提到，Title就是给链接做个注释，这个时候我们可以做（增加某一关键词的密度），也可以不做（不影响搜索引擎和用户对链接的判断），大家可以根据自己的实际情况进行把握了。

我们今天的关于img标签中alt属性和title属性的区别和img标签的alt属性与title属性区别的分享就到这里，谢谢您的阅读，如果想了解更多关于<转载>form标签中id和name属性的区别、alt属性和title属性、alt属性和title属性_CSS/HTML、Alt标签和Title标签的区别在和使用讲解的相关信息，可以在本站进行搜索。

本文标签：