swftext

HTML的图像标签

文本使网页的内容得到充实，那图像使网页的内容更加丰富多彩。使用图像不仅

能使网页更加美观、大方、整洁、形象和生动，而且能给网页增添无限生机，从

而吸引更多的浏览者。因此图像在网页中的作用是举足轻重的。作为一个网页设

计者，掌握好网页中图像的应用尤为重要。下面我们就开始介绍常用的图片格式，

以及如何在网页中实现图文并茂的页面。

本节单词记忆：标签属性

网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得

它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有

必要的。

一五寸蛋糕 、常见的图片格式

在日常生活中，使用比较多的图像格式有4种，即JPG、GIF、SWF、BMP。在网

页中使用比较多的是JPG、GIF和SWF，大多数浏览器都可以显示这些图像。下

面我们就来分别介绍这4种常用图像。

JPG(JPEG)格式图像是在Intemet上被广泛支持的图像格式，它是联合图像专家

组文件格式(JointPhotographicExpertsGroup)的英文缩写。JPG格式采用的

是有损压缩，

会造成图像画面的失真，不过压缩之后的体积很小，而且还比较清晰，所以比较

适合在网页中应用。

此格式最适合用于摄影或连续色调图像的高级格式，这是因为JPG文件可以包含

数百万种颜色。随着JPG文件品质的提高，文件的大小和下载时间也会随之增加。

通常可以通

过压缩JPG文件在图像品质和文件大小之间达到良好的平衡。

制作JPG文件的软件很多，比较常见的有Photoshop、HyperSnap等。

GIF图像是网页中使用最广泛，最普遍的一种图像格式，它是图像交换格式

(GraphicsInterc声乐学习 hangeFormat)的英文缩写。GIF文件的众多特点恰恰适应了

Intemet的需要，于是它成了Internet上最流行的图像格式，它的出现为

Internet注入了一股新鲜的活力。

GIF格式图像采用的是无损压缩，由于只支持256色，所以GIF格式图像体积也

很小。支持透明色，使得GIF在网页的背景和一些多层特效的显示上用得非常多，

还支持帧动

画，这是它最突出的一个特点。要设计GIF动画，首先要用图像处理软件做好

GIF动画中的每一幅单帧画面，然后再用专门的GIF动画软件把这些静止的画面

连在一起，再定

好帧与帧之间的时间间隔，最后保存成GIF格式就可以了。

制作GIF文件的软件也很多，比较常见的有Photoshop、GIFConstructionSet

等。

3．SWF

SWF动画是网页中应用非常广泛的一种多媒体图像动画，这种格式的动画图像能

够用比较小的体积来表现丰富的多媒体形式。在图像的传输方面，可以边传输边

观看，因此

特别适合网络传输，特别是在传输速率不佳的情况下，也能取得较好的效果。事

实也证明了这一点，SWF如今已被大量应用于Web网页进行多媒体播放与交互性

设计。此

外，SWF动画是基干矢量技术制作的，因此不管将画面放大多少倍，画面不会因

此而有任何失真。综上所述，SWF格式作品以其高清晰度的画质和小巧的体积，

受到了越

来越多网页设计者的青睐，也越来越成为网页动画和网页图片设计制作的主流，

目前已成为网页上动画的事实标准。SWF文件的缺点就是制作起来非常耗时耗

力。

制作SWF文件的软件也很多，比较常见的有Flash、SWFText等。

4．BMP

BMP图像是在Windows操作系统中使用得比较多，它是“位图”的英文缩写。BMP

图像可以用任何颜色深度（从黑白到24位颜色）存储单个光栅图像。BMP图像

文件格式

与其他MicrosoftWindows程序兼容。它不支持文件压缩，也不适用于Web页。

从总体上看，BMP图像格式的缺点超过了它的优点。为了保证照片图像的质量，

请使用

JPG文件。BMP文件适用于Windows中的墙纸。BMP的优点支持l位到24位颜色

深追梦环游记 度，并且与现有Windows程序广泛兼容。BMP的缺点是不支持压缩，这会造成

文件非

常大。

制作BMP文件的软件也很多，比较常见的有Photoshop、Windows自带的“画图”

软件等。

二、图像的基本语法

标签用于在HTML文档中插入图像，该标签可以放在要显示图像的位置。

标签不含任何内容，它使用src属性指定图像源文件所在的路径。

演唱会开幕">

其中，src参数用来设置图像文件所在的位置，width和height属性用来指定图

像的宽度和高度，alt属性有两个作用：第一个是在网页中，如果图像没有被下

载，在图像位置

上出现的提示文字；第二个是在网页中，如果图像下禁毒的意义 载完，将鼠标放在该图像上，

在鼠标旁边出现的提示文字。

示例1：

height="150">

示例1在浏览器中预览效果如图1所示，把鼠标指向图像上方，稍等片刻，就会

出现提示文字“明星演唱会开幕”。

图1给图像添加提示文字的效果小书虫作文300字三年级

三、图像与文本的对齐

标签的align属性可用于调整图像相对于周围文本的对齐方式。align属

性可取下面的值：top、bottom、middle、left或right。

语法：

其中，align=”top”篮球的图片 表示图片的顶端和当前行文字顶端对齐，align=”bottom”

表示图片的底部和当前行文字底部对齐，ali红船精神 gn=”middle”表示图片的中部和当

前行文字中部对齐，

align=”left”表示图片记金华的双龙洞 左对齐，align=”right”表示图片右对齐。

示例2

height="95"border="0"/>

请点击广告进入明星专区

border="0"/>晚上睡觉打呼噜

请点击广告进入明星专区

示例2在浏览器中预览效果如图2所示。

图2图像与文本的对象方式

本节作业：

制作如下图网页。

注意事项：

1.图片的宽度，高度可自由设置。

2.图片与文本的对齐方式。

3.如何居中，如何空格等简单排版。

网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进

入下一次教程，动起手来吧！

点击下载第一章案例及作业资源返回《HTML入门经典》教程列表

转载请注明本文地址:/html/jc/