图像标签<img>和源属性（Src） 在 HTML 中，图像由<img>标签定义。
<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg
图片标签用于向当前页面中引入一个外部图片
使用标签<img>来引入外部图片，img标签是一个自结束标签 img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）
属性：
src属性指定的是外部图片的路径(路径规则和超链接是一样的) alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示 搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录 width 图片的宽度（单位是像素） height 图片的高度 - 宽度和高度中如果只修改了一个，则另一个会等比缩放 注意： 一般情况在pc端，不建议修改图片大小，需要多大的图片就裁剪多大 但在移动端，经常需要对图片进行缩放（大图缩小） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <img src="./img/11.jpg" alt="阿胡"> <img width="500" height="400" src="http://img3.imgtn.bdimg.com/it/u=1904115335,254690848&fm=26&gp=0.jpg" alt="ironman"> </body> </html>结果：
jpeg（jpg）
- 支持颜色比较丰富，不支持透明效果，不支持动图 - 一般用来显示照片gif
- 支持的颜色比较少，支持简单透明，支持动图 - 适合单一图片，动图png
- 支持颜色丰富，支持复杂透明，不支持动图 - 颜色丰富，复杂透明图片（专为网页而生）webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式 - 它具备其他图片格式的所有优点，而且文件还特别小 - 缺点：兼容性不好base64
- 将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片 - 一般都是一些需要和网页一起加载的图片才会使用base64效果一样，用小的 效果不一样，用效果好的
html 相对路径的写法：
./ ：代表文件所在的目录（可以省略不写）如果写成image/background就相当于是在html文件下找image文件夹，当然是找不到的 ../ ：代表文件所在的父级目录 ../../ ：代表文件所在的父级目录的父级目录 / ：代表文件所在的根目录例如：
<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>很多个人博客或主页中，会直接使用图片作为背景，这样设计可以很好的突出网页主体
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景图片标签</title> </head> <body background="../images/map.jpg"> <!-- 添加文档主体内容 --> <h3>HTML5 + CSS + JS --- HTML网页图片背景</h3> <hr><br> <!-- 添加文档主体内容 --> <p>gif、jpg、png格式图片均可用作HTML页面背景</p> <p>如果图像小于页面, 图像会自动进行重复</p> </body> </html>在HTML网页中，图片和文字一样可以设置对齐方式，这样就可以根据需要对图片进行排列了
基本语法：
<img src="图片文件路径" align="对齐方式"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片对齐</title> </head> <body> <h3>HTML5 + CSS + JS --- HTML网页中图片对齐</h3> <hr> <!-- 添加文档主体内容 --> <p>图像 <img src="../images/image_small.jpg" align="bottom" /> 底部对齐（默认缺省方式）</p> <hr> <p>图像 <img src="../images/image_small.jpg" align="middle" /> 中部对齐</p> <hr> <p>图像 <img src="../images/image_small.jpg" align="top" /> 顶部对齐</p> <hr> <p>注意: bottom对齐方式是默认的对齐方式。</p> </body> </html>默认情况下，图片与周围对象的水平间距和垂直间距都为0
基本语法：
<img src="图片文件路径" hspace="水平间距" vspace="垂直间距">默认情况下，插入的图片是没有边框的
基本语法：
<img src="图片文件路径" border="边框宽度">在HTML网页中，浮动图片也是很常用的一种方法，这样就可以根据需要将图片放置在不同的位置了
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动图片</title> </head> <body> <h3>HTML5 + CSS + JS --- HTML网页中浮动图片</h3> <br><hr><br> <!-- 添加文档主体内容 --> <p> <img src ="../images/image_small.jpg" align ="left"> 以上带有图像的一个段落,图像的align属性设置为"left".<br> 图像将浮动到文本的左侧.<br> </p> <br><hr><br> <p> <img src ="../images/image_small.jpg" align ="right"> 以上带有图像的一个段落,图像的align属性设置为"right".<br> 图像将浮动到文本的右侧.<br> </p> </body> </html>href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
例如： <link href="reset.css" rel=”stylesheet“/>浏览器会识别该文档为 css 文档，并行下载该文档，并且不会停止对当前文档的处理。
src 是 source 的缩写，src 的内容是页面必不可少的一部分，是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。
例如: <script src="script.js"></script>当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
简而言之， src 用于替换当前元素； href 用于在当前文档和引用资源之间建立联系。
热点区域主要用于图像地图，通过定义标记可以在图像地图中设定作用区域，这样鼠标移动到指定区域单击时，会自动链接到预先设定好的页面
定义热点区域需要在img标签元素内使用usemap属性将该图像定义为客户端图像映射，这里的图像映射指的是带有可单击区域的图像
然后将usemap属性与map标签的元素name或id属性相关联，以建立<img>与<map>之间的关系
<map>标签元素就是带有可单击区域的图像映射，在map标签元素内通过area标签元素定义具有区域参数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片热点区域</title> </head> <body> <img src="../images/hotspot.jpg" border="1" usemap="#hotspot-map" /> <map name="hotspot-map"> <area shape="rect" coords="10,10,60,60" href="hotspot-rect.html" target="_blank" /> <area shape="circle" coords="150,150,50" href="hotspot-circle.html" target="_blank" /> <area shape="poly" coords="300,300,500,300,500,600,600,600,300,300" href="hotspot-poly.html" target="_blank" /> </map> </body> </html> <body> <img src="img/6.jpg" usemap="#fishing"> <map name="fishing" id="fishing"> <area shape="circle" coords="137,204,35" href="other/fish.html"/> <area shape="circle" coords="180,104,20" href="other/moon.html"/> <area shape="rect" coords="260,65,340,150" href="other/door.html"/> </map> </body>首先，img标签中usemap属性与map元素的name或id属性相关联，以建立img与map之间的关系。
该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）,herf表示此图片区域链接到的位置
1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>2、圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) …)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>