HTML页面中怎么添加图片

这篇文章主要介绍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>

效果图：

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页面中怎么添加图片”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

当前标题：HTML页面中怎么添加图片
路径分享：https://www.cdcxhl.com/article46/ppedhg.html

成都网站建设公司_创新互联，为您提供商城网站、网站导航、响应式网站、定制网站、网站建设、网站设计

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容