HTML的图片标记
图片是网页中的常见内容，能使网页变得丰富多彩。网页中使用<img/>标记来引入图片，这是一种非闭合的标记，常用格式为：
<img src="图片路径" width="宽度" height="高度" alt="图片的替代文本" />
实际上，img标记并没有将图片插进网页，像word那样，而只是链接到网页，图片仍然存储在网页外部，只是用src属性指定了图片的路径，然后浏览器就会把图片加载并把其内容显示在img标记所在的位置。
图片的路径，可以是外部网站的网址，这时要使用"http://"前缀，也可以是本地服务器中的图片，这时只需要使用相对路径。示例：
<img src="http://www.dwenzhao.cn/images/a1.gif" />
<img src="/images/adtemp.png" />
浏览器可以显示的图片格式一般有jpg、png和gif，其中jpg是一种有损压缩的文件格式，支持红绿蓝三色的24bit色彩，一般的相机照片都以这种方式存储或可转换为这种方式； 而png是近年来流行起来的一种图片格式，以无损压缩方式存储，其增加了透明度alpha通道，为32bit色彩。因为有了透明度通道，可以实现半透明效果，在纹理贴图中比较方便， 正逐渐变成网页及图片处理中的主流格式。
gif是一种较早出现的图片格式，只支持256色，与24bit色彩能实现的16777216色彩相差很多，一般只用于人工制作的图片，如手绘动画这类，而相机拍摄的照片如果存储为这种格式会丢失色彩， 使平滑过渡的颜色变得不再平滑，产生颗粒感。但gif格式可以存储多帧图像，产生一种动画效果，这是其他图片格式不具有的。具有多帧动画的gif图片可以在浏览器中自动播放，而不用占用其他资源， 而如果使用jpg或png格式产生动画效果，就需要通过编程才能实现。
其实，浏览器一般也支持bmp格式图片，这种图片格式比较简单，一般是不压缩的，同样的图片如果存储为bmp格式会占用较多存储空间，所以一般情况下大图片不会使用bmp。 现在bmp格式往往用在小图片中，如图标ico，一般幅面都比较小，存储时不压缩占用空间也不大。虽然图标图片一般以.ico为后缀，但实际上是一种bmp格式图片，我的网站图标也可以显示出来。
<img/>标记还常用width和height属性，用于设定显示图片的宽和高，如果不设定，就使用图片本身的宽或高，如果设定且与本身的值不同则会自动进行相应的压缩或拉伸。 为了避免图片被压缩或拉伸而造成变形，要使用原来的宽高值或不设定。
早期的互联网网速比较低，大图片加载缓慢甚至常常失败，所以有了alt属性，当图片加载失败时使用此文本替代图片，能使页面内容容易理解。现在一般并不使用这个属性，或设定为空串， 这并不会影响图片的加载和显示，但有些网络爬虫软件会搜索其中的内容，设定此属性值容易被网络搜索引擎收录。
<img/>标记还有ismap属性，教材中的说明是“将图像定义为服务器端图像映射”，比较难以理解。这时要把<img/>标记放在<a></a>标记中：
<a href="imghandle.php">
<img src="/images/adtemp.png" ismap />
</a>
当用户在使用ismap属性的图像上使用鼠标单击时，浏览器会自动把鼠标相对于图像的左上角的 x、y 位置发送到服务器端，服务器端则使用<a></a>标记中href属性指定的后端程序"imghandle.php"来处理传送来的两个值。 这种功能需要服务器后端程序配合才能起作用，要在学了php这类后端编程后才能清楚使用方法，这里只是提一下，知道图片可以这样使用。
<img/>标记还有usemap属性，教材中的说明是“将图像定义为客户器端图像映射”。使用方法如下：
<img src="/images/adtemp.png" alt="sim" usemap="#simmap" />
<map name="simmap" id="simmap">
<area href="/index.html" shape="circle" coords="150,150,40" alt="首页"/>
<area href="/cal/index.html" shape="rect" coords="130,20,170,70" alt="网页计算"/>
<area href="/exercise/index.html" shape="circle" coords="150,250,40" alt="编程演练"/>
</map>
图片上通过<img/>标记的usemap属性指定了对应的<map></map>标记，<map></map>中包裹了多个<area/>标记，每个<area/>设定图片上的一个特定区域。 <area/>有shape属性，可以有rect、circ、poly属性值，分别设定区域为矩形、圆形、多边形，而coords属性则设定区域的坐标，其中矩形为左上角和右下角的x、y坐标值， 而圆形则为圆心x、y坐标和半径，多边形则是各个顶点的x、y坐标值。href属性设置鼠标点击对应区域时打开的链接，也可以使用target属性，与使用a标记中的含义一致。 area标记还有一个nohref属性，指定从图像映射排除某个区域。
按上述代码设定的图片，表面并看不出什么明显变化，但使用鼠标移动到图片上时，就能看到图片沿中心线从上到下有三个区域，鼠标移动到对应区域上时鼠标形状会变成手形， 表示这是一个鼠标可点击的链接区域。点击中心点会转到网站首页，而上下两个点则另外两个网站页面。
使用usemap属性的应用相对比较复杂，它可以在一个图片中划定出几个区域，每个区域对应一个可跳转的链接。其实也可以把整个图片设置为一个链接区域，点击图片就会跳转到某个网页。
<a href="/index.html" target="_blank"><img src="/favicon.ico" alt="首页" /></a>
这只是把<img/>标记放置在<a></a>标记之间，点击这幅图片就可以转到href属性设定的页面。
<img/>标记还有其他一些属性，如边框border、对齐align、左右侧空白hspace、上下空白vspace等，已不建议使用，而是改为使用CSS来设定。
<img src="图片路径" width="宽度" height="高度" alt="图片的替代文本" />
实际上，img标记并没有将图片插进网页，像word那样，而只是链接到网页，图片仍然存储在网页外部，只是用src属性指定了图片的路径，然后浏览器就会把图片加载并把其内容显示在img标记所在的位置。
图片的路径，可以是外部网站的网址，这时要使用"http://"前缀，也可以是本地服务器中的图片，这时只需要使用相对路径。示例：
<img src="http://www.dwenzhao.cn/images/a1.gif" />
<img src="/images/adtemp.png" />
浏览器可以显示的图片格式一般有jpg、png和gif，其中jpg是一种有损压缩的文件格式，支持红绿蓝三色的24bit色彩，一般的相机照片都以这种方式存储或可转换为这种方式； 而png是近年来流行起来的一种图片格式，以无损压缩方式存储，其增加了透明度alpha通道，为32bit色彩。因为有了透明度通道，可以实现半透明效果，在纹理贴图中比较方便， 正逐渐变成网页及图片处理中的主流格式。
gif是一种较早出现的图片格式，只支持256色，与24bit色彩能实现的16777216色彩相差很多，一般只用于人工制作的图片，如手绘动画这类，而相机拍摄的照片如果存储为这种格式会丢失色彩， 使平滑过渡的颜色变得不再平滑，产生颗粒感。但gif格式可以存储多帧图像，产生一种动画效果，这是其他图片格式不具有的。具有多帧动画的gif图片可以在浏览器中自动播放，而不用占用其他资源， 而如果使用jpg或png格式产生动画效果，就需要通过编程才能实现。
其实，浏览器一般也支持bmp格式图片，这种图片格式比较简单，一般是不压缩的，同样的图片如果存储为bmp格式会占用较多存储空间，所以一般情况下大图片不会使用bmp。 现在bmp格式往往用在小图片中，如图标ico，一般幅面都比较小，存储时不压缩占用空间也不大。虽然图标图片一般以.ico为后缀，但实际上是一种bmp格式图片，我的网站图标也可以显示出来。
<img/>标记还常用width和height属性，用于设定显示图片的宽和高，如果不设定，就使用图片本身的宽或高，如果设定且与本身的值不同则会自动进行相应的压缩或拉伸。 为了避免图片被压缩或拉伸而造成变形，要使用原来的宽高值或不设定。
早期的互联网网速比较低，大图片加载缓慢甚至常常失败，所以有了alt属性，当图片加载失败时使用此文本替代图片，能使页面内容容易理解。现在一般并不使用这个属性，或设定为空串， 这并不会影响图片的加载和显示，但有些网络爬虫软件会搜索其中的内容，设定此属性值容易被网络搜索引擎收录。
<img/>标记还有ismap属性，教材中的说明是“将图像定义为服务器端图像映射”，比较难以理解。这时要把<img/>标记放在<a></a>标记中：
<a href="imghandle.php">
<img src="/images/adtemp.png" ismap />
</a>
当用户在使用ismap属性的图像上使用鼠标单击时，浏览器会自动把鼠标相对于图像的左上角的 x、y 位置发送到服务器端，服务器端则使用<a></a>标记中href属性指定的后端程序"imghandle.php"来处理传送来的两个值。 这种功能需要服务器后端程序配合才能起作用，要在学了php这类后端编程后才能清楚使用方法，这里只是提一下，知道图片可以这样使用。
<img/>标记还有usemap属性，教材中的说明是“将图像定义为客户器端图像映射”。使用方法如下：
<img src="/images/adtemp.png" alt="sim" usemap="#simmap" />
<map name="simmap" id="simmap">
<area href="/index.html" shape="circle" coords="150,150,40" alt="首页"/>
<area href="/cal/index.html" shape="rect" coords="130,20,170,70" alt="网页计算"/>
<area href="/exercise/index.html" shape="circle" coords="150,250,40" alt="编程演练"/>
</map>
图片上通过<img/>标记的usemap属性指定了对应的<map></map>标记，<map></map>中包裹了多个<area/>标记，每个<area/>设定图片上的一个特定区域。 <area/>有shape属性，可以有rect、circ、poly属性值，分别设定区域为矩形、圆形、多边形，而coords属性则设定区域的坐标，其中矩形为左上角和右下角的x、y坐标值， 而圆形则为圆心x、y坐标和半径，多边形则是各个顶点的x、y坐标值。href属性设置鼠标点击对应区域时打开的链接，也可以使用target属性，与使用a标记中的含义一致。 area标记还有一个nohref属性，指定从图像映射排除某个区域。
按上述代码设定的图片，表面并看不出什么明显变化，但使用鼠标移动到图片上时，就能看到图片沿中心线从上到下有三个区域，鼠标移动到对应区域上时鼠标形状会变成手形， 表示这是一个鼠标可点击的链接区域。点击中心点会转到网站首页，而上下两个点则另外两个网站页面。
使用usemap属性的应用相对比较复杂，它可以在一个图片中划定出几个区域，每个区域对应一个可跳转的链接。其实也可以把整个图片设置为一个链接区域，点击图片就会跳转到某个网页。
<a href="/index.html" target="_blank"><img src="/favicon.ico" alt="首页" /></a>
这只是把<img/>标记放置在<a></a>标记之间，点击这幅图片就可以转到href属性设定的页面。
<img/>标记还有其他一些属性，如边框border、对齐align、左右侧空白hspace、上下空白vspace等，已不建议使用，而是改为使用CSS来设定。