1、在代码中经常用到的插入图片代码是袭芦img属性，格式就是 src后面是添加图片的地址，后皮型面的alt是对图片的描述。 　　2、在插入图片前，要将html文燃禅猜件和图片文件放在一个文件夹内，这里的img文件夹就是专门存放图片的地方。 　　3、然后回到代码栏，在src中输入链接地址img/pic_01.jpg，要将图片的具体地址和名称全部写全才可以在网页中看到，否则就会显示连接失败错误而无法观看到图片。 　　4、将文件保存后，在浏览器中我么就可以看到此刻的图片被添加进来了，位于网页的左上角位置。 　　5、如果想要移动图片的所在位置，就需要先对其包装一下，用一个盒子将其包裹，然后调整盒子的位置就相当于移动的是图片的位置了。 　　6、如图，之前设置的盒子距离顶部100px.然后距离左侧100px，这样就将盒子挤到了现在所在的位置，如图所示。

　　这一章我们来学习怎么样在网页中插入图片，最重要的是学会图片的相对路径的用法，另外需要了解常用的图片格式和特点。 　　1、HTML中图片用img标签引入，img是image的缩写。img标签有三个重要属性需要掌握：src、alt和title，其中src是图片的路径，alt用于向探索引擎描述图片，title用于向用户描述图片。img标签的语法是： 　　 　　从下面的例子中可以看到，当鼠标放在图片上时，图片上出现的文字就是title属性里的内容，而alt的内容是看不见的。 　　当我们把src属性中的地址删掉，无法显示图片的时候，原来图片的位置上就会出现alt属性的内容了，如下图： 　　2、绝对路径 　　现在我的电脑上面有如下图所示的文件系统，绝对路径就是在计算机或服务器上的完整路径，无论在哪个网页上引用，路径都是一样的。代码和效果如下： 　　 　　注意这里的图片名pic2.jpg包括扩展名。 　　3、相对路径 　　相对路径是指相对于当前页面的位置，这句话不好理解，我们通过4种情况来说明。 　　（1）网页和图片在同一个文件夹里，就是这里的page3和pic1的关系或者page2和pic2的关系。这种情况直接引用图片的名称就可以。 　　 　　（2）图片在与网页同级的文件夹里，就是这里的page2和pic1的关系，这里要用到pic1所在的文件夹名。 　　 　　（3）图片在网页的上级文件夹里，就像page1和pic2的关系，引用代码如下： 　　 　　注意这段代码里的“..”表示的是上一级文件夹。谁的上一级文件夹？当前网页的所在文件夹的上一级。所以"..pic2.jpg"的意思是“本网页的上一级文件夹里的pic2.jpg图片”。 　　（4）图片和网页分别在两个同级的文件夹中，就像此处的page1和pic1的关系，引用的代码和显示效果如下： 　　 　　（5）会不会有其它的情况？ 　　理论上说会，实际上谁把网页和相应的图片放在那么远的地方呢？ 　　4、常见的图片格式 　　（1）常见的图片格式有两类：位图和矢量图 　　位图的常用格式有.jpg、.jpeg、.png、.gif，矢量图的常用格式为.swf，它们的特点如下图所示。 　　（2）以上三种位图的引用代码和显示效果如下： 　　 　　 　　
　　 　　 　　注意：这段代码所用图片与网页在同一个文件夹内。 　　此网页的背景设置成了蓝色，大家可以清楚地看到，最后一张.png格式的图片是透明的。