怎么用代码插入图片怎么才能把图片放在网页上显示

说到网页上插入图片，真的是超简单，你只要会用一点点HTML代码就可以啦。最常用的就是用<img>标签，格式超级直观，主要两个属性要记住：src，就是图片的路径，还有alt，它是给图片做描述的，万一图片加载不出来或者给视觉障碍用户看，alt就是救星啦。比如，你的图片放在名叫img的文件夹里，代码就像这样写：

<img src="img/pic_01.jpg" alt="描述图片">

不过呢，先别急着写代码，有个小技巧告诉你哈：确保你的HTML文件和图片文件放在同一个文件夹里面，要不然图片是链接不到的哦。比如，你可以先新建个img文件夹专门放图片，整理起来方便还清爽！

那问题来了：怎么才能把图片放在网页上真真切切显示出来？嘿，这事儿其实还挺路子的。市面上有很多网页编辑器，比如Dreamweaver、FrontPage啥的，用它们新建网页，然后在<body>标签里插入图片代码，直接预览页面，图片就乖乖地出现了。很方便的是，如果你用的是Dreamweaver，还可以直接把图片拖进网页“设计”视图里，转换成代码视图一看，图片插入的代码立马就显示出来了，根本不用自己手敲，好用到爆！

HTML 中添加图片的代码是什么怎么把图片横排排列

其实，网页中添加图片的方法不止一种，咱们平时搞得更多的是用HTML标签<img>，这玩意是行内元素，自带属性可以自己调节高度和宽度，方便到不行。
另外，还有用CSS的background-image属性来设置背景图，这两个玩意儿组合起来，能满足绝大多数图片需求。举个简单例子：

使用<img>标签添加图片，举个栗子：

<img src="img/pic_02.jpg" alt="这是另一张图片" width="200" height="150" />

使用CSS背景属性添加图片：

div {
  background-image: url('img/bg.jpg');
  width: 300px;
  height: 200px;
}

说到页面布局，那大家会关心怎么把图片排一排，横着漂亮地摆放着对吧？这里给你点干货！通常我们会把每张图片放到<div>里，给这个div用float: left;来让它往左浮动。别忘了给这些图片的盒子加点外边距控制间隔，毕竟太挤那就尴尬了，看着心塞。图片的img标签最好设置成display: block;，这样子底下不会漏出白边空隙。这样一来，图片们就可以整齐地横着排开啦，非常炫酷！

实操步骤看这里：