标签：<img / > (只需单对即可) 作用：插入图像 属性：src，alt （替换文本） 贴士：(1)支持格式：PNG/JPEG/GIF/PDF (引入的PDF必须是单页的) (2)非标签方式：background 1.插入网络图片
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像</title> <!--定义样式--> <style> /*<!--.是用来匹配文档中指定类名-->*/ .imooc-logo{ /*通过非标签的方式将图片插入到HTML中*/ background: url(http://www.imooc.com/static/img/index/logo.png); width: 200px; height: 80px; } </style> </head> <body> <!--width和height用来设置图片的大小,alt的作用是在图片无法正常显示时给用户提供提示--> <img alt="imooc-logo" src="http://www.imooc.com/static/img/index/logo.png"/> <!--class:标识，用来指定标签的类名--> <p class="imooc-logo"> </p> </body> </html>上述代码分别通过标签和非标签的方法来插入网络图像，结果如下：
上述分别用标签和非标签插入网络图片，那么如何来插入本地图像？ 2.插入本地图像 现在引入概念：路径——资源所处位置 （1）绝对路径 （2）相对路径
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像</title> <!--定义样式--> <style> /*<!--.是用来匹配文档中指定类名-->*/ .imooc-logo{ /*通过相对路径来插入本地图片*/ background: url(./logo.png); width: 200px; height: 80px; } </style> </head> <body> <!--class:标识，用来指定标签的类名--> <p class="imooc-logo"> </p> </body> </html>上述代码是用相对路径来插入本地图像，结果如下：
