图文详解HTML页面中添加图片的三种方法

方法一、用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页面中添加图片的三种方法的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！