第六章 ：详解html图像的处理
第六章 ：详解html图像的处理 2011/7/29 30
图像可以使html页面美观生动且富有生机。浏览器可以显示的图像格式有jpeg，bmp，gif。 其中bmp文件存储空间大，传输慢，不提倡用，常用的jpeg和gif格式的图像相比较，jpeg图像支持数百万种颜色，即使在传输过程中丢失数据，也不会在质量上有明显的不同，占位空间比gif大， gif图像仅包括265色彩，虽然质量上没有jpeg图像高， 但占位储存空间小，下载速度最快、支持动画效果及背景色透明等特点。 因此使用图像美画页面可视情况而决定使用那种格式。
背景图像的设定
<body background= "image-url">
其中 "image-url" 指图像的位置。
<html>
<head>
<title>设置背景图像</title>
</head>
<body background="imge/11.gif">
<center>
</center>
</body>
</html>
网页中插入图片的` 标签<img>
网页中插入图片用单标签<img>，当浏览器读取到<img>标签时，就会显示此标签所设定的图像。如果要对插入的图片进行修饰时，仅仅用这一个属性是不够的，还要配合其它属性来完成。
插入图片标签<img>的属性
|
属 性 |
描 述 |
|
src |
图像的url的路径 |
|
alt |
提示文字 |
|
width |
宽度 通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具. |
|
height |
高度 通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具. |
|
lowsrc |
设定低分辨率图片,若所加入的是一张很大的图片，可先显示该图片。 |
|
usemap |
映像地图 |
|
align |
图像和文字之间的排列属性 |
|
border |
边框 |
|
hspace |
水平间距 |
|
vlign |
垂直间距 |
<IMG> 的格式及一般属性设定：
<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of Website" lowsrc="pre_logo.gif">
普通插入图片 实例
<html>
<head>
<title>普通插入图片</title>
</head>
<body>
<BODY>
<CENTER>
<H2>风景图片</H2>
<IMG src="../../imge/6-5.gif">
</CENTER>
</body>
</html>
设定上下左右空白位置 hspace/vspace
<html>
<head>
<title>设定图像与文本之间的距离</title>
<body>
<img src="../../imge/6-5.gif" align="left" hspace="20" vspace="20">
<font size="+3">首段文字。<BR>
第一段文字<BR>第二段文字</font> <BR>
</body>
</html>
字画对齐方式 实例
图像和文字的之间的对齐是通过align属性来设定的， align的对齐方式有两种：即绝对对齐和相对对齐。绝对对齐方式的效果和文字一样，只有三种：居中（middle）、居左（left）、居右（right）。相对文字对齐方式是指图像与一行文字的相对位置。
对其属性align的设定
|
属 性 值 |
对 齐 方 式 |
|
top |
s("content_relate"); 【 第六章 ：详解html图像的处理】相关文章： |