图片书写alt和title属性浅谈

先看一段简单的html代码：

<img src='图片链接地址' border="0" alt="alt替换文本" title='title提示文本'/>

当图片链接地址有误时，页面显示效果为图1，且在所有浏览器中，均相同，即 alt文本替换图片显示为alt的值，title 为鼠标悬浮图片事显示的文字。

如果我们去掉图片的title，只留alt，代码如下：

<img src='图片链接地址' border="0" alt="alt替换文本" />

在ie6 和ie7中的显示效果如图2，其他浏览器为图3.

 

备注：经测试在Safari 浏览器中，alt不论何种情况都不显示。

在ie6 和ie7显示效果其实是因为ie浏览器的不规范造成的

关于alt 和title 的用法，我总结如下:

在XHTML标准里，图片的alt 属性是必须的，此属性的实质作用是图片在无法正确显示的时候起到文本替代的作用,不过在IE6,ie7下还起到了title的作用,Alt属性值得长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。 只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。

alt属性添加到img主要的目的才是为了SEO（搜索引擎优化），搜索引擎不认识图片，但能够通过alt的值对图片内容做出判断。

Title是鼠标滑过时显示的文字提示，用户体验上很重要。

title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。其先级高于alt text。

title属性添加到img主要的目的是为了UEO（用户体验优化）

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

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

所以 alt text和title对访问者都很重要（alt text对搜索引擎会更重要一些），所以在定义img对象时，最好将alt text和title属性都写全，保证在各种浏览器中都能正常使用。并且二者内容最好不一样。但不要堆积关键字，否则可能会导致搜索引擎惩罚。

让alt 和title 值换行的代码是&#13;例如下：

<img src="icon/icon4.gif" alt="第一行&#13;第二行&#13;第三行">

<img src="icon/icon10.gif" title="第一行&#13;第二行&#13;第三行">