怎么用代码插入图片？

1、在代码中经常用到的插入图片代码是img属性，格式就是<img src="" alt="">   src后面是添加图片的地址，后面的alt是对图片的描述。

2、在插入图片前，要将html文件和图片文件放在一个文件夹内，这里的img文件夹就是专门存放图片的地方。

3、然后回到代码栏，在src中输入链接地址img/pic_01.jpg，要将图片的具体地址和名称全部写全才可以在网页中看到，否则就会显示连接失败错误而无法观看到图片。

4、将文件保存后，在浏览器中我么就可以看到此刻的图片被添加进来了，位于网页的左上角位置。

5、如果想要移动图片的所在位置，就需要先对其包装一下，用一个盒子将其包裹，然后调整盒子的位置就相当于移动的是图片的位置了。

6、如图，之前设置的盒子距离顶部100px.然后距离左侧100px，这样就将盒子挤到了现在所在的位置，如图所示。

图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img>标签定义。

<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />

URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

URL你可以指定是网络上的图片,如果你在本地,可以指定本地图片

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

基本的注意事项 - 有用的提示：

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

1、首先新建一个html文件，命名为test.html，在test.html文件内，在div内，使用img标签创建一张图片，使用p标签创建两个文字。

2、然后在test.html文件内，设置div的class属性为mydiv。

3、接着在css标签内，通过class设置div的样式，定义它的宽度为280px，高度为200px，位置属性为相对定位(relative)。

4、在css标签内，再定义p标签的样式，设置它的位置属性为绝对定位(absolute)，同时，使用bottom属性设置距离底部为0px，使用right属性设置距离右边为0px。

5、最后在浏览器打开test.html文件，查看实现的效果。

---