当越来越多的浏览器开发商想占据浏览器市场时,他们总会做出很多不按规则的事来,就好比今天我们拿alt、title两属性来说,在Mac、Windows下面他们的渲染就不一样。其实主要还是今天在一张图片为了alt和title纠结时,才打算写这篇文章的。

PS:我这里说的alt和title是指属性

alt属性

在不能正常显示图像时对该图像进行描述,我的表达估计不太好,但是并不像很多文章里面说:光标移到图像上时显示的提示语。非常明确指出他的用途,而在windows下面你会看到他被渲染进鼠标移上提示语。

alt属性必须在100个英文字符以内相当于50个中文字符,这代表着你必须要很简略的文字描述图像的意思。

也有很多人把alt属性当作SEO优化属性来做,比如:有张宝宝照片,也许你可以看到类似这么一串XHTML

<img src="baobao.jpg" alt="宝宝 宝宝生日 小宝宝 大宝宝 没宝宝 有宝宝" />

这得注意,因为现在的Spam越来越聪明,反而会把你当成垃圾网站来处理。

我们说alt属性要简略,如果你做不到建议你留空:alt=””,为什么呢?alt属性是为了不正常显示图像时起到作用的,如果你觉得对一张图片这样描述:“某某某CEO穿着黑色西装、红色领带、站在某某大楼外、仰望天空?”对于阅读者来说有用的话,那你就做吧!如果说无法三言两语解释图像,可以考虑为空,然后以独立的文字来说明,这样的效果会更好一些,绝大多数图像展示页面都是这样做。

title属性

title属性更多出现在a标签上,当然我们这里不讨论在html、head、script、base、meta等等中的title属性。

针对a标签title属性很好的用途,即为链接提供更加详细的描述。而如果展示这串描述在不同的平台也不一样,但这已经是早期浏览器的情况,至少现在绝大多数都是鼠标移到后出现提示。

为了效果破坏属性值?真的值吗?

有了达到酷酷的效果,您可能会看到这样XHTML:

<a href="/" title="图片大小:100KB<br />图片来源:新华社<br />More...">宝宝</a>

曾经何时我也写过类似XHTML,但是我发现这是一种非常错误的写法,属性值嵌套XHTML标签,如果网页放到屏幕阅读器上,是不是也把“<br />”也读给用户听呢?后来我使用的做法是将“<br />”替换成”。”,然后通过脚本做渲染你所需要的效果。

参考资料