html中图像标签基础知识
网页中使用的图像文件格式
gif
gif的全称是Graphics Interchange Format。是在1987年由Compu Serve公司为了填补跨平台图像格式的空白而发展起来的。
考虑到网络带宽的限制，gif格式运用了颜色查找表的技术，只将最多256种颜色的颜色序号进行传输，因此数据量小，但色彩表现不够好。
其特点是：
- GIF格式图像文件的扩展名是“.gif”；
- 采用无损压缩算法LZW处理图像数据；
- 对于灰度图像及单色区块组合的画面表现最佳；
- 支持透明，适合嵌套在其他背景之上。
png
png的全称是Portable Network Graphics。是Unisys公司为了替代替代GIF格式而推出的一种无损压缩的位图格式。 其特点是：
- GIF格式图像文件的扩展名是“.png”；
- 采用LZ77算法的派生算法进行压缩；
- 相比同样颜色深度的GIF格式体积更小；
- 颜色过渡平滑；
- 支持透明，适合嵌套在其他背景之上；
- 不支持动画。
jpg
jpg的全称是Joint Photographic Experts Group。由国际标准化组织（ISO）制订的面向连续色调静止图像的一种压缩标准。 其特点是：
- JPG格式图像文件的扩展名是“.jpg”或“.jpeg”；
- 采用预测编码（DPCM）、离散余弦变换（DCT）以及熵编码的联合编码方式，对图像数据进行压缩；
- 可支持极高的压缩率；
- 可轻松处理16.8M颜色，再现全彩色图像；
- 不支持透明；
- 采用有损压缩，每修改一次就会损失一些图像数据。
文件路径的表示
绝对路径
绝对路径是指从树型目录结构顶部的根目录开始到某个目录或文件的路径。它由一系列连续的目录组成，中间用斜线分隔，直到要指定的目录或文件。有以下两种情况：
- 计算机硬盘上的文件，例如： d:/web/movie/index.html
- 网络上的文件，例如： http://www.itshixun.com/movie/index.html
相对路径
相对路径是指按照这个文件与引用该文件的位置关系来表示的路径。图像和使用图像的html文件的位置关系有以下三种情况：
- 图像文件和html文件位于同一文件夹，例如
<img src=“logo.gif” /> - 图像文件位于html文件的下一级文件夹，例如
<img src="img/img01/logo.gif" /> - 图像文件位于html文件的上一级文件夹，例如
<img src="../logo.gif" />
图像在网页中的应用
图像在网页中的应用有三种类型：用作背景图、嵌入网页、用作超链接的链源。
设置网页背景图
如需用图像作网页背景图，可在<body>中添加background属性，其属性取值即为图像的路径。
网页中嵌入图像
如需将图像嵌入网页中，可使用<img>标签实现。img标签的属性主要有：
- src ：给定图像来源的位置
- alt ：设置在图像未载入前图片位置显示的文字
- border ：设置图像边框
- Width和 height ：设定图像的宽度和高度
- vspace和hspace：设置图片左右及上下边缘的边距
- title：鼠标停留在图片上时显示的说明文字
- align：设置图文对齐方式,其属性取值含义如下图
| 属性 | 说明 |
|---|---|
| left | 图像浮于文本左侧 |
| right | 图像浮于文本右侧 |
| middle | 图像中部与文本对齐 |
| top | 图像顶部与文本对齐 |
| bottom | 图像底部与文本对齐 |
用图像作超链接的链源
在超链接开始和结束标签之间嵌套img标签，可将img标签设置的图像作为超链接的链源。例如<a href="https://www.baidu.com"><img src="picture/logo-baidu.png"/></a>
相关概念选择题及参考答案
选择题
1、下列选项中，不适合作网页图像的文件格式是（ ）。
A、
jpg
B、
png
C、
gif
D、
bmp
2、如果想为网页添加背景图，可在body标签中添加（ ）属性。
A、
background
B、
src
C、
href
D、
url
3、下列选项中，哪个不是相对路径的表示方式（ )。
A、
…/files/images/ch_cook1.gif
B、
…/files/images/ch_cook1.gif ./file/ch_cook1.gif
C、
c：/pic/images/ch_cook1.gif
D、
pic/folder/images/ch_cook1.gif
4、title属性用于设置网页标题。
A、
正确
B、
错误
5、下列选项中，哪个不是img标签的属性（ ）。
A、
href
B、
title
C、
alt
D、
align
参考答案
1、D
2、A
3、C
4、B
5、A