html添加图片的代码(学生个人网页制作html)
大家好，今天来为大家解答html添加图片的代码这个问题的一些问题点，包括学生个人网页制作html也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~
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代码：灶蔽
【divclass="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-repeatcenter；
background-size：100%100%；
}
【/style】
求html插入图片的代码
在html中插入图片使用img标签，它有src属性用于填写该图片的路径，alt属性作用是当图片显示失败时就显示alt中的文字。
设置图片的宽用width，高用height，上下左右的位置分别用margin-top，margin-bottom，margin-left，margin-right，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>image</title>
<meta charset="utf-8">
<style type="text/css">
.myImage{
width: 400px;
height: 300px;
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<img src="images/cat.jpg" class="myImage" alt="小猫">
</body>
</html>
扩展资料：
img标签的其它常用属性：align属性应用于图像和周围文本的对齐方式，border属性应用于图像边框值。
img标签向网页中嵌入一幅图像,从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接图像，<img>标签创建的是被引用图像的占位空间。
参考资料：
百度百科-image标签
怎么在网页中插入图片html图片代码
在网页中插入图片html图片代码方法：
步骤：
一、html图片标签语法
<imgsrc="divcss-logo-201305.gif"width="165"height="60"/>
img介绍：
src后跟的是图片路径地址
width设置图片宽度
height设置图片高度
二、具体html图片显示实例
在html源代码中分别插入三张图片，一张原始大、一张将宽度高度改小小、一张将宽度高度改大。
1、实例完整html代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>图片插入html在线演示</title>
</head>
<body>
<p>原始大图片</p>
<p>
<imgsrc="divcss-logo-201305.gif"width="165"height="60"/>
</p>
<p>改小图片</p>
<p>
<imgsrc="divcss-logo-201305.gif"width="105"height="30"/>
</p>
<p>改大图片</p>
<p>
<imgsrc="divcss-logo-201305.gif"width="365"height="120"/>
</p>
</body>
</html>
2、html插入图片实例截图
3、在线演示：
在html网页中显示图片，插入图片，通过使用img标签来实现，通过也可以将图片作为CSS网页背景图片显示插入到Html网页中（css背景图片）。
文章到此结束，如果本次分享的html添加图片的代码和学生个人网页制作html的问题解决了您的问题，那么我们由衷的感到高兴！