图文详解HTML页面中增加图片的三种办法
发布时间：09/01 来源：未知 浏览：
关键词：
办法一、用HTML中的img标签增加图片
最简便，最常用的就是直接使用img标签，并且可以按照需要设定图片的大小，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <img src="img/picture1.jpg"/ width="300px" height="180px"> </body> </html>
结果图：
办法二、用JavaScript创立一个img元从来导入图片
先创立一个img元素，再设定这个img元素的途径，图片长和宽，最后将其插入到页面中，代码如下：
<script type="text/javascript">
var Image1 = document.createElement("img");
Image1.src = "img/picture1.jpg";
Image1.width = 300;
Image1.height = 180;
document.body.appendChild(Image1);
</script>办法三、用JavaScript中的innerHTML动态插入图片
还是使用JavaScript中的办法，本色和办法二相似，只是写法不一样，创立img元素然后增加到HTML页面，代码如下：
<script type="text/javascript"> document.body.innerHTML = '<img src="img/picture1.jpg" height="180" width="300" />'; </script>
图片结果和办法一一样。
以上介绍了在HTML页面中增加图片的三种办法，一样我们都会直接使用img标签增加图片，但有时也会使用JavaScript动态插入图片，详细选中什么办法，看项目需要。小白可以本人动手尝试，但愿可以帮忙到你！
以上就是图文详解HTML页面中增加图片的三种办法的具体内容，更多请关注百分百源码网其它相关文章！
