图文详细说明HTML页面中添加图片的3种方法

发表时间：2023-08-31 来源：明辉站整理相关软件相关文章人气：

[摘要]在页面布局时，经常需要在页面中插入图片，那你知道如何在HTML中添加图片吗？这篇文章就给大家介绍HTML页面中插入图片的三种方法，感兴趣的朋友可以参考一下，希望对你有所帮助。方法一、用HTML中的img标签添加图片最简单，最常用的就是直接使用img标签，并且可以根据需要设置图片的大小，代码如下：&...

在页面布局时，经常需要在页面中插入图片，那你知道如何在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>

效果图：

图片1.jpg

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

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

标签：图文详细说明HTML页面中添加图片的3种办法

上一篇：html如何引入css文件？HTML引入外部css文件的4种方法

下一篇：html中input submit、button与回车键提交数据详细说明

文章发布全站软件文章热门搜索：片尾跳过旋转 MP4 歌曲片头资讯首页腾讯视频爱奇艺暴风影音酷狗音乐酷我音乐影音大全软件下载软件教程电脑系统下载聊天工具办公软件杀毒教程系统工具图形图像电脑学习应用软件网络软件苹果应用注册码网站教程技术开发安卓教程其它教程您当前所在位置：网视手游站 -> 网站教程 -> 图文详细说明HTML页面中添加图片的3种方法
图文详细说明HTML页面中添加图片的3种方法发表时间：2023-08-31 来源：明辉站整理相关软件相关文章人气： [摘要]在页面布局时，经常需要在页面中插入图片，那你知道如何在HTML中添加图片吗？这篇文章就给大家介绍HTML页面中插入图片的三种方法，感兴趣的朋友可以参考一下，希望对你有所帮助。方法一、用HTML中的img标签添加图片最简单，最常用的就是直接使用img标签，并且可以根据需要设置图片的大小，代码如下：&... 在页面布局时，经常需要在页面中插入图片，那你知道如何在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> 效果图：方法二、用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页面中添加图片的三种方法的详细内容，更多请关注php中文网其它相关文章！微信分享网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。标签：图文详细说明HTML页面中添加图片的3种办法上一篇：html如何引入css文件？HTML引入外部css文件的4种方法下一篇：html中input submit、button与回车键提交数据详细说明	推荐资讯总人气榜 1PS提示：因为图层已锁定，无法编辑图层的处理方法 2picacg苹果版怎么找不到\|picacg ios版是不是下架了介绍 3Adobe Illustrator CS5 序列号大全 4ACDsee注册码免费分享（含ACDsee18、ACDsee10等版本） 5PDF浏览器能看3D文件吗？PDF浏览器看3D文件图文详细教程 6Potato(土豆聊天)怎么换头像\|Potato app更改头像方法介绍 7Potato(马铃薯聊天)怎么注册不了\|Potato不能注册处理方法介绍 8最新的Adobe Illustrator CS4序列号大全 9Intel i7-9700K性能跑分曝光：同代提升约12% 10qq邮件是否已读怎么看 QQ邮箱已经发出去的邮件怎么知道对方是否已经查看 11XP系统怎么清除缓存？ 12AMD推土机架构回顾：虽陨落却是Zen成功的垫脚石 1GG广告申请 2提高谷歌联盟Adsense收入4种方法 32014年9月百度绿萝算法再度升级 4百度减少收录是什么原因？ 5百度降权并不可怕 6新手误区：揭露seo反链工具的真实面目 7浅谈增加网站外部链接的方法 8被降权问题浅谈百度页面权重 9360搜索结果现”本地”标签披露未来搜索优化趋势 10百度谷歌等大型网站收录页面提交入口地址 11恢复百度权重的一些心得 12SEO优化必须控制个度最新教程本月人气 1免费4组爱奇艺会员账号密码分享（2017.5.12） 2最新2组腾讯视频vip账号共享（2017.5.12） 3最新6组爱奇艺会员账号共享（2017.5.11） 4免费2组腾讯视频vip账号共享（2017.5.11） 5最新6组爱奇艺会员账号共享（2017.5.9） 6免费4组腾讯视频vip账号共享（2017.5.9） 7爱奇艺会员如何取消自动续费技巧？ 8很方是什么意思？网络流行语“很方”词语解释 9优酷会员共享一人一号不掉线 10优酷会员免费领取7天如何领取？ 11为什么爱奇艺播放不了？爱奇艺播放不了的处理方法 12战旗TV主播公布直播的图文说明教程 1支付宝不能交水电费了吗支付宝为什么不能交水电费了 2人人车怎么收费人人车收费规范 3华为pay与微信支付哪一个好微信支付与huawei pay比较区别 4平板电脑wifi无线网络设置图文说明教程【图文详细说明】 5百度专车怎么收费百度专车收费规范介绍 6微信怎么投诉微商卖家微信怎么投诉才能让对方封号 7ios9 bug隐藏无用应用方法 8猎豹浏览器抢票不受12306新版验证码影响 93星版iphone6s与台积电版iphone6s续航哪一个好 10宁夏银行手机银行怎么开通宁夏银行手机银行开通图文说明教程 11酷狗怎么设置伴唱并录音酷狗伴唱设置图文说明教程 12iPad Apple store下载速度太慢：更改DNS为你的Apple store加速
相关文章分享查看页面源代码的4种方法 html如何设置超链接字体颜色？html设置超链接字体颜色的方法常用HTML代码大全（入门者必备） Bootstrap是什么，有什么特点？什么是HTML语义化？html语义化的好处（总结）分享div+css前端命名的规则 CSRF是什么？CSRF的危害以及防备方法什么是http，http请求方式与传递数据分类是什么？ html中position有哪一些用法？position的用法说明 HTML如何设置字体颜色？html字体颜色设置的3种方法 html5与传统html的区别，有哪一些新增的与废除的元素？服务器上webpack打包的过时hash文件如何进行清理

图文详细说明HTML页面中添加图片的3种方法

推荐资讯 总人气榜

最新教程 本月人气

相关文章

推荐资讯总人气榜

最新教程本月人气