HTML图片<img/>

没有丰富多彩的图片，就没有互联网如此的绚丽，img是HTML中经常用到的一个标签。

图像标签（<img>）和源属性（Src）

要引用一个图片，首先要指明图片的地址，如下，通过src指定图片地址

<img src="../../img/banner01.jpg" />

图像标签（<img>）-宽度width和高度height

可通过设置img的width，height属性指定图片展示的宽度和高度，如果不指定，则按照图片本身尺寸展示，如下所示，强制将图片拉伸至width＝500px，height＝100px

<img src="../../img/banner01.jpg" width="500" height="100"  />

图片宽高也可以设置为百分比，此百分比相对的是img标签父元素的宽高，如下，img的父元素宽500px，高200px，图片宽度设置为100%，即宽度＝500px*100%

<div style="width: 500px;height: 200px">
    <img src="../../img/banner01.jpg" width="100%" height="100%"  />
</div>

图像标签（<img>）-alt

有时候可能存在图片读取失败，如图片路径错误，或者图片被删除了，导致前端展示的时候，不能正常加载图片，此时，可以通过设置alt属性，在图片加载失败时，显示一段提示文字。

<img src="../../img/banner01.jpg" alt="焦点图"  />

注意：如果一个网页加载的图片过多，会导致网站打开较慢，因此在使用图片时，尽可能提前把图片进行压缩，或者采取懒加载的方式，提升用户体验，后续会针对此进行详细介绍。