一、 图像的格式
说明：网页中图像的格式通常有3种，即GIF、JPEG和PNG。目前GIF和JPEG文件格式的支持情况最好，大多数浏览器都可以查看它们。由于PNG文件具有较大的灵活性并且文件较小，所以它对于几乎任何类型的网页图形都是最适合的，但是Microsoft Internet Explorer和Netscape Navigator只能部分支持PNG图像的显示。建议使用GIF或JPEG格式，以满足更多人的需求。
1. GIF格式
-
GIF是英文单词Graphic Interchange Format的缩写，即图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。
-
GIF格式的最大优点就是可制作动态图像，可以将数张静态文件作为动画帧串联起来，转换成一个动画文件。
-
GIF格式的另一优点就是可以将图像以交错的方式在网页中呈现。所谓交错显示，就是当图像尚未下载完成时，浏览器会先以马赛克的形式将图像慢慢显示，让浏览者可以大略猜出下载图像的雏形。
2. JPEG格式
- JPEG是英文单词Joint Photographic Experts Group的缩写，它是一种图像压缩格式。此文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。
- JPEG格式是一种压缩的非常紧凑的格式，专门用于不含大色块的图像。JPEG图像有一定的失真度，但是在正常的损失下肉眼分辨不出JPEG和GIF图像的区别，而JPEG文件只有GIF文件的1/4。JPEG对图标之类的含大色块的图像不是很有效，不支持透明图和动态图，但它能够保留全真的色调板格式。如果图像需要全彩模式才能表现效果的话，JPEG就是最佳的选择。
3. PNG格式
- PNG（Portable Network Graphics）图像格式是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。它不仅具备了GIF图像格式的大部分优点，而且还支持48-bit的色彩，更快地交错显示，跨平台的图像亮度控制，更多层的透明度设置。
二、 插入图像
说明：插入图像的标签只有一个，那就是 img 标签。
1. 插入图像标记 img
img 标签相关属性见下表：
| 属性 | 描述 |
|---|---|
| src | 图像的源文件 |
| alt | 提示文字 |
| width，height | 宽度和高度 |
| border | 边框 |
| vspace | 垂直间距 |
| hspace | 水平间距 |
| align | 排列 |
| dynsrc | 设定 avi 文件的播放 |
| loop | 设定 avi 文件循环播放次数 |
| loopdelay | 设定 avi 文件循环播放延迟 |
| start | 设定 avi 文件播放方式 |
| lowsrc | 设定低分辨率图片 |
| usemap | 映像地图 |
2. 图像的源文件 src
<img src="图像文件的地址">
说明：src 属性用于指定图像源文件所在的路径，它是图像必不可少的属性。在该语法中，src参数用来设置图像文件所在路径，这一路径可以是相对路径，也可以是绝对路径，还可以是https://为关键字的网络图像。
3. 图像的提示文字 alt
<img src="图像文件的地址" alt="提示文字的内容">
说明：当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
4. 图像的宽度和高度 width、height
<img src="图像文件的地址" width="图像的宽度" height="图像的高度">
说明：width和height属性用来定义图片的高度和宽度，如果 img 元素不定义高度和宽度，图片就会按照它的原始尺寸显示。在该语法中，图像的宽度和高度的单位是像素。
提示：无论在width和height属性中指定什么值，整个图像都会被下载，即使width和height属性值设置得很小，图像也不会下载得更快。
5. 图像的边框 border
<img src="图像文件的地址" border="图像边框的宽度">
说明：默认情况下，图像是没有边框的，通过border属性可以为图像添加边框线。可以设置边框的宽度，但边框的颜色是不可以设置的。当图像上没有添加链接的时候，边框的颜色为黑色；当图像上添加了链接时，边框的颜色和链接文字颜色一致，默认为深蓝色。在该语法中，border的单位是像素，值越大边框越宽。
6. 图像的垂直边距 vspace
<img src="图像文件的地址" vspace="垂直边距">
说明：垂直边距 vspace 用来调整图像与文字的垂直边距。在该语法中，vspace 属性的单位是像素。
7. 图像的水平间距 hspace
<img src="图像文件的地址" hspace="水平边距">
说明：图像与文字之间的水平距离可以通过 hspace 参数进行调整。通过调整图像的边距，可以使文字和图像的排列显得紧凑，看上去更加协调。在该语法中，水平边距hspace属性的单位是像素。
提示：使用 hspace 和 vspace 属性会在图像周围对称加入空格。hspace 属性在图像两侧加入空格，而 vspace 属性在图像顶部和底部加入相同的空格。
8. 图像的排列 align
<img src="图像文件的地址" align="文字的对齐方式">
说明：图像和文字之间的对齐是通过 align 属性来设定的，align 的对齐方式有两种，即绝对对齐和相对对齐。绝对对齐方式的效果和文字一样，只有三种 ”居中“，”居左“，”居右“。相对对齐方式是指图像与一行文字的相对位置。
align 的属性取值表如下：
| 属性 | 描述 |
|---|---|
| bottom | 图片的底部和当前行的文字底部对齐 |
| top | 图片的顶端和当前文字的顶端对齐 |
| middle | 图片水平中线和当前行的文字中线对齐 |
| left | 图片左对齐 |
| center | 图片水平中线和当前行的文字中线对齐 |
| right | 图片右对齐 |
三、 图像的超链接
说明：除了文字可以添加超链接外，图像也可以设置超链接属性。同一个图像的不同部分也可以链接到不同的文档，这就是热区链接。
1. 图像的超链接
<a href="链接地址"><img src="图像文件的地址"></a>
说明：图像的链接和文字的链接方法是一样的，都是用 a 标签来完成，只要将 img 标签放在 a 和 /a 之间就可以了。在该语法中，href 参数用来设置图像的链接地址。
2. 图像热区链接
<img src="图像地址" usemap="映射图像名称">
<map name="映射图像名称">
<area shape="热区形状" coords="热区坐标" href="链接地址">
</map>
说明：在HTML中可以把图片划分成多个热点区域，每一个热点区域链接到不同的网页。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接，这就是映射地图。在该语法中要先定义映射图像的名称，然后再引用这个映射图像。在 area 标记中定义了热区的位置和链接，其中shape参数用来定义热区形状，coords 参数则用来设置区域坐标，对于不同形状来说，coords 设置的方式也不同。
[关于如何设置热区](Dreamweaver如何创建图形热区链接-百度经验 (baidu.com))