一，效果图。
二，代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html 图像</title>
</head>
<body>
<!--插入图像-->
<p>
An image:<img sr="smiley.gif" alt="smiley face" with="32" height="32">
</p>
<p>A moving image:<img src="hackanm.gif" alt="computer man" with="48" height="48">
</p>
<p>note that the syntax of inserting a moving image is no different from a non-moving image.
</p>
<!--从不同的位置插入图片-->
<p>An image from another folder:</p>
<img src="/images/chrome.gif" alt="Google chrome" width="33" height="32">
<p>An image frome W3Schools:</p>
<img src="http://www.w3cschool.cc/images/w3cschool.png" alt="W3CSchool.cc" width="336" height="69">
<!--排列图片-->
<h4>Image with default alignment(align="bottom"):</h4>
<p>this is some text,<img src="smiley.gif" alt="smiley face" width="32" heigth="32">this is some text.</p>
<h4>image with align="middle":</h4>
<p>this is some text,<img src="smiley.gif" alt="smiley face" align="middle" with="32" height="32">this is some text</p>
<h4>image with align="top":</h4>
<p>this is some text.<img src="smiley.gif" alt="smiley face" align="top" width="32">this is some text.</p>
<p><b>Note:</b> the align attribute is deprecated in html4,and is not supported html5.Use CSS instead.</p>
<!--浮动头像-->
<p>
<img src="smiley.gif" alt="simly face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text.
</p>
<p>
<img src="simley.gif" alt="smiley face" style="float:right" width="32" height="32">A paragraph with an image. The image will float to the right of this text.
</p>
<p><b>Note:</b> Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.</p>
<!--设置图像链接-->
<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>
</p>
<p>无边框的图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>
</p>
<!--设置图像映射-->
<p>点击太阳或其他行星，注意变化：</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
参考资料：《菜鸟教程》