如何在HTML上插⼊图⽚
在HTML中插⼊图⽚的⽅法有：直接在html代码上插⼊、在CSS样式中插⼊、在JavaScript中通过给img设置src值来插⼊图⽚、innerHTML插⼊img属性来插⼊图⽚
如果⼀个页⾯中仅有⽂字会显得很单调，枯燥乏味，但是当我们添加了⼀些图⽚在上⾯时会显得好看多了，今天将向⼤家介绍如何在HTML 页⾯上插⼊图⽚。
在HTML页⾯中插⼊图⽚需要⽤到html中的<img>标签
<imgsrc=""alt="">
img代表“图像”，它是图像在页⾯上显⽰。
src代表“来源”它告诉浏览器去哪⾥图像，在写代码的时候最好将图⽚放置在⼀个⽂件夹下保存，通过这样的⽅式可以通过名称前⾯的⼦⽬录名称来调⽤图⽚
alt代表“⽂字”告诉浏览器如果不到图像，就只显⽰该⽂本，或者将⿏标悬停在图像上就会弹出设置的⽂字
Web的图像格式
.gif：是⼀种简单的格式，由⼀系列彩⾊图⽚元素或点，排列成⼀幅图⽚，是动图
.png：与gif格式类似但它具有部分透明度选项，只⽀持⽆损压缩。
.JPEG：JPEG格式是⽬前⽹络上最流⾏的图像格式，是可以把⽂件压缩到最⼩的格式
HTML插⼊图⽚⽅法
直接在html代码内插⼊图⽚
<imgsrc="images/1.jpg">
效果图：
在CSS样式中插⼊图⽚
<style>
div{
width:450px;
height: 300px;
background-image: url("images/2.jpg")
}
</style>
</head>
<body>
<div></div>
效果图：
利⽤JavaScript语⾔插⼊图⽚
<body>
<imgid="demo">
<script>
var ElementById("demo");
demo.src="images/3.jpg";
demo.width="450";
html图片展示特效demo.height="300";
</script>
</body>
效果图：
innerHTML⽅法插⼊图⽚
<divid="demo"></div>
<script>
var demo=document.ElementById("demo");
demo.innerHTML='<imgsrc="images/4.jpg"width="450px"height="300px">';
</script>
效果图：
总结：以上就是本篇⽂章的全部内容了，希望对⼤家学习有所帮助。
以上就是如何在HTML上插⼊图⽚的详细内容，更多请关注我

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。