一个貌似常识的问题,img的alt和title属性

偶然在群里提到了img标签的alt和title属性到底有什么区别.然后做了以下试验.

<p><img src="" alt="alt"></p>
<p><img src="" title="title"></p>
<p><img src="" alt="alt" title="title"></p>
<p><img src="http://ihkhost.b0.upaiyun.com/upyun.gif" width="200" height="20" alt="alt"></p>
<p><img src="http://ihkhost.b0.upaiyun.com/upyun.gif" width="200" height="20" title="title"></p>
<p><img src="http://ihkhost.b0.upaiyun.com/upyun.gif" width="200" height="20" alt="alt" title="title"></p>

测试结果如下:

alt和title都是提示性语言标签,它们之间是有一定区别的:
alt是在图片不存在时作为替代文字;
title是对图片的描述与进一步说明;
Firefox16,chrome,IE8+等较新的浏览器alt属性是不显示的,只显示title属性;
在ie6,ie7等老一些的内核的浏览器中,当鼠标指向图片时,有title显示title,没有title则显示alt.如果alt和title属性同时存在,显示的是title值.

补充:alt属性一般用于图片提示,title还可以用于给普通文字或者链接文字提示。
一般用法如下代码:
<p title=”给普通文字加提示”>文字</p>
<a href=”http://www.**.com/” title=”给链接文字加提示”>文字</a>

鬼懿群的一个问题.第一次遇到这样的问题.很好玩

调查一个问题,请别测试,用直觉回答。在一般的布局下(也就是非伸缩布局)如果我有一行的宽度大于包含块的宽度(用’white-space: nowrap’ 之类的),你觉得用’text-align: right’ 会发生什么事?

A. 该行的右边跟包含块的右边对齐
B. 该行的左边还是与包含块左边对齐,也就是’text-align: left’ 的效果。


Continue reading