在HTML中我们常见的，PNG和JPG等的图片插入方式是不一样的，他的区分主要在插入图片路径的不同，接下来我们就深入了解一下吧。
一，插入PNG图片
在PNG格式图片中，我们经常会用其它图片插入的路径形式进插入，这是插入图片失败的最终的根本原因。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在网页中插入一张原始图片</title>
</head>
<body>
<img src="../Web前端开发/3.png" width="1000" height="800"><!--width=“宽度”，height=“高度”-->
</body>
</html>这是PNG插入图片的路径，其实不难可以看出，在src=“../”双引号中有../然后再到文件路径，而正因为是这样的格式，才导致我们用其它图片插入的路径不匹才会出现有图片插入不进去的后果。
运行效果如下：
由于设置了图片的：“宽度和高度”所有这图片插入的效果就是这样的，大家也可以根据自己的需求来进行图片的合理设置大小。
二，插入JPG图片
前面说PNG图片的区别，现在到PNG图片在HTML中，我们插入JPG图片是一个简单且直接的，在插入图片路径时是不需要输入任何的特殊符号的一个图片插入过程。
<img src="/Web前端开发/4.jpg"width="1000" height="800">它是直接省了在src="/"前面的两个小数点，直接进行插入式。
运行效果如下：
总结：在HTML插入图片形式中，我们遇到不同的图片格式，都是有不同的插入现实的。区别在于一些小细节里，我们可以通过改变它的插入路径的形式进行插入，进而成功插入也为自己的学习效果更上一个台阶，在HTML的编程中还有好多学习的细节，也望友友们多多分享，多多指教。谢谢！
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
