HTML 中添加图片的代码是什么？

在html和css阶段，通常可以使用两种方式来添加图片。即使用html标签引入图片和使用css中的background属性添加背景图。下面对这两种方式做个简单的介绍岩辩派。

一、使用【img/】元素引入图片

可以使用【img/】这个元素引入图片，这是一个行内元素，但是具有行内块的属性，可以自行设置高度和宽度。

【img src="../image/bird.png"alt="鸟图"height="300"】。

属性说明：

1、src：通过图片存放路径引入图片，其值就是图片的路径。

2、alt：可给图片设置一个备注名称，当图片因为某种原因加载粗贺不出来时，页面会显示设置的alt值。与之类似的还有一个属性title。alt和title有所不同。往些年面试时，alt和title的区别也是高频考点。这里我不做赘述，留给你的作业，自己去研究研究。

3、height：可设置图片的高度，与之对应的还有一个width属性，也就是可以设置图片的宽度，但是在实际的使用中，height和width往往只用其一，另一个属性值会自动按比例匹配。比如设置height="100",那么图片的width会根据你设置的height属性值自动等比例缩小或者放大，不用再显式的设置width值。反之亦然。

二、css的backgroud系列属性引入背景图。

除了使用html的【img src=''/】引入图片以外，还可以使用css的backgorund系列属性将图片作为背景图添加。由于background系列属性比较多，这里不做过多介绍，只说几个比较常用的属性，其他的可参考官方文档学习。

html代码：灶蔽

【div class="box"】【/div】

css设置图片的分开写法：

【style】

.box{

height：300px；

width：400px；

background-image：url（../image/bird.png）；

background-size：100%100%；

background-repeat：no-repeat；

background-position：center；

}

【/style】

css设置图片的统一写法：

background-image，background-repeat，background-position可以合成一句。background-size，可以是一个值也可以是两个值，一个值时，第一个值标识高度，宽度则会自适应你设置的值。两个值时，图片会根据你自己设置的值拉伸或者缩小。

【style】

.box{

height：300px；

width：400px；

background:url（../image/bird.png）no-repeat center；

background-size：100%100%；

}

【/style】