HTML:使用图像

第四章:使用图像

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元素的相关属性如下表:

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

4.2.2图像的源文件src

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

<img src="图像文件的地址">

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

4.2.3图像的提示文字alt

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

<img src="图像文件的地址" alt="提示文字的内容">

说明:提示的内容可以是中文,也可以是英文。

4.2.4图像的宽度和高度

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

<img src="图片的地址" width="图片的宽度" height="图片的高度">

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

4.3 图像的超链接

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

4.3.1 图像的超链接

图像的链接和文字的链接是一样的,都是使用a标签来完成
语法:

<a href="链接地址"><img src="图像文件的地址"></a>

说明:href参数用来设置图像的链接地址。

图像的热区链接

在HTML中可以把图片划分为多个热点取余,每一个热点区域链接到不同的网页
语法:
首先在图像文件中设置映像图像名,在图像的属性中使用usemap标记添加添加图像要引用的映射图象的名称如下:

<img src="图像地址" usemap ="映像图像名称">

然后需要定义热区图像以及连接属性如下:

<map name="映像图像名称">
<area shape="热区形状" coords="热区坐标" href="链接地址">
</map>

说明:在该语法中要先定义映射图象的名称,然后再引用这个映像图像。在area标记中定义了热区的位置和链接。对于不同形状来说,coords设置的方式也不同。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值