Skip to content

Latest commit

 

History

History
49 lines (22 loc) · 1.98 KB

2.1.4 img标签的方方面面.md

File metadata and controls

49 lines (22 loc) · 1.98 KB

IMG>标签的方方面面

问题1:如果在一个页面上插入标签,有哪些属性是必需的?

答案是src和alt。

问题2:标签在HTML和XHTML中有什么区别?

在 HTML 中, 标签没有结束标签。例如:

<img src=" http://www.w3school.com.cn/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" >

在 XHTML 中, 标签必须被正确地关闭。

<img src=" http://www.w3school.com.cn/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

问题3:在一个页面上插入标签,为什么说最好要使用height和width属性?

您在浏览网页的时候,可能会遇到这种情况:随着页面中的图像加载并成功显示,页面上的内容会随之发生不规律的移动,影响您的阅读。这种情况就是因为页面上的图像没有定义height和width属性而导致的。

如果没有定义图片的height和width属性,那么浏览器为了能够显示每一个加载的图像,它需要先下载图像,然后解析出图像的高度和宽度,并在显示窗口留出相应的屏幕空间,这样就会导致浏览器不断地重新计算/调整页面的布局,这可能会延迟文档的显示,并导致页面重绘。

因此,笔者建议使用的 height 和 width 属性来指定图像的尺寸。这样的话,浏览器在下载图像之前就为其预留出了空间,从而可以加速文档的显示,还可以避免文档内容的移动而引起页面重绘。

问题4:标签的onload/onerror/onabort事件,在什么情况下会被触发?

onload: 事件会在图像加载完成后立即发生。

onerror: 事件会在文档或图像加载过程中发生错误时被触发。

onabort: 事件会在图像加载被中断时发生。例如用户单击了浏览器的Stop按钮,或者在图像下载的过程中。

参考