HTML：使用图像

青旅半醒 2022-06-05 05:40 225阅读 0赞

# 第四章：使用图像 #

## **4.1图像的格式** ##

网页中的图片格式通常有三种，即GIF，JPEG，和PNG。  
1. GIF，Graphic Interchange Format，文件最多可以使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像。其最大优点是可以制作动态图像，其另一优点是将图像以交错的方式在网页中呈现，所谓交错显示，就是当图像尚未下载完成时，浏览器会先以马赛克的形式将图像慢慢显示，让浏览者可以大致猜出下载图像的雏形。  
2. JPEG,Joint Photographic Experts Group,此文件格式适合用于摄影或连续色调图像的高级格式，可包含数百万种颜色。JPEG格式是一种压缩的非常紧密的格式，专用于不含大色块的图像。  
3. PNG格式，Portable Network Graphics，是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。它不仅具备GIF图像格式的优点，而且还支持48位的色彩、更快的交错显示、跨平台的图像亮度控制、更多曾的图像透明度设置。

## **4.2 插入图象** ##

插入图象的标记只有一个，那就是img标记。  
\#\#\# \*\*4.2.1插入图像标记img  
图像是网页构成中最重要的元素之一，img元素的相关属性如下表：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>图像的源文件</td> 
  </tr> 
  <tr> 
   <td>alt</td> 
   <td>提示文字</td> 
  </tr> 
  <tr> 
   <td>width，height</td> 
   <td>宽度和高度</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td>边宽</td> 
  </tr> 
  <tr> 
   <td>vspace</td> 
   <td>垂直间距</td> 
  </tr> 
  <tr> 
   <td>hspace</td> 
   <td>水平间距</td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td>排列</td> 
  </tr> 
  <tr> 
   <td>dynsrc</td> 
   <td>设定avi文件的播放</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>设定avi文件循环播放的次数</td> 
  </tr> 
  <tr> 
   <td>lopdelay</td> 
   <td>设置avi循环播放延迟</td> 
  </tr> 
  <tr> 
   <td>start</td> 
   <td>设定avi文件播放方式</td> 
  </tr> 
  <tr> 
   <td>lowsrc</td> 
   <td>设定低分辨率图片</td> 
  </tr> 
  <tr> 
   <td>usemap</td> 
   <td>映像地图</td> 
  </tr> 
 </tbody> 
</table>

### **4.2.2图像的源文件src** ###

src属性是指图像源文件所在的路径，它是图像必不可少的属性。  
语法：

说明：这一路径可以是绝对路径，也可以是相对路径。可以使用文件和http://关键字作为图像的地址，并且能够用于在网页上加载图片。

### **4.2.3图像的提示文字alt** ###

提示文字有两个作用，第一个是，当浏览网页时，如果图片下载完成，将鼠标指针放在该图像上，鼠标指针旁边会出现提示性文字。第二个作用是，如果图片没有被下载，在图像的位置上会显示提示文字。  
语法：

说明：提示的内容可以是中文，也可以是英文。

### **4.2.4图像的宽度和高度** ###

width和height属性用来定义图片的宽度和高度，如果元素不定义高度和宽度，图片就会显示原始尺寸。

说明：在该语法中，图像的高度和宽度的单位是像素。

## **4.3 图像的超链接** ##

除了文字可以添加超链接外，图像也可以设置超链接属性。同一个图像的不同部分也可以链接至不同的文档，这就是热区链接。

### **4.3.1 图像的超链接** ###