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

如题所述

第1个回答  2023-09-09

在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】

相似回答