6.1 网页常见图片格式
目前，图片格式有GIF、JPEG、PNG、BMP、TIF等多种格式，在我们制作网页时，不同格式的图片的浏览速度是不一样的。
从浏览速度的角度来看，目前适合在网上浏览的图片格式主要有JPEG、GIF和PNG3种。
JPEG格式
JPEG(Joint Photographic Experts Group,联合图像专家组标准)，又称JPG，支持数百万种色彩主要用于显示照片等颜色丰富的精美图像。JPEG是质量有损耗的格式，这意味着在压缩时会丢失一些数据，因而降低了最终文件的质量，然而由于数据丢失得很少，因此在质量上不会差很多。
GIF格式
GIF (Graphics lnterchange Format，图形交换格式），是网页图像中很流行的格式。它最多使用256种色彩，最适合显示色调不连续或具有大面积单一颜色的图像。此外，GIF 还可以包含透
明区域和多帧动画，所以GIF常用于卡通、导航条、Iogo、带有透明区域的图形和动画等。
PNG格式
PNG（Portable Network Graphics，可移植网络图形）既融合了GIF格式透明显示的颜色，又具有JPEG处理精美图像的优势，是逐新流行的网络图像格式，但目前测览器对其支持并不一致。
6.2 插入图片
在网页中插入图片，需要使用< img>标记。
基本语法
<img src=“图片文件路径”>
语法说明
src属性指定需要插入的图片文件路径，这是一个必设属性。< img>标记除了src属性外，还有一些常用的属性。通过这些属性可以获得插入的图片的不同表现效果。
6.2.1 设置图片大小
使用< img>标记插入图片，默认情况下将插入原始大小的图片，如果想在插入时修改图片的大小，可以使用height和width属性来实现。
基本语法
在这里插入代码片
语法说明
宽度和高度可以是像素值也可以是百分数，如果是像素值，则直接写一个数值即可，而百分数是相对于浏览器窗口的一个比例。
eg.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置图片大小</title>
</head>
<body>
<img src="C:\Users\ASUS\Desktop\大草莓王嘉尔\little ga.jpg" width="160" height="30%">
<img src="C:\Users\ASUS\Desktop\大草莓王嘉尔\little ga.jpg">
</body>
</html>
6.2.2 设置图片文本
有时为了对网页上的图片做某些方面的描述说明，或者是当网页图片无法下载时，能让用户了解图片内容，我们在制作网页时可以通过图片的alt属性对图片设置提示文本。当鼠标移至图片位置时，会自动弹出文本描述提示框。
基本语法
<img src="图片文件路径" alt="提示文本">
语法说明
提示文本中的内容可以包括空格、标点以及一些特殊的字符。
eg.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置提示文本</title>
</head>
<body>
<img src="C:\Users\ASUS\Desktop\大草莓王嘉尔\little ga.jpg" width="160" alt="嘉宝童年照，宽度为160像素值">
</body>
</html>
6.2.3 设置图片与周围对象的间距
基本语法
默认情况下，图片与周围对象的水平间距和垂直间距都为0，对这样的一个间距，很多时候都不符合我们的设计需要。使用图片的hspace和vspace属性可以分别设置图片与周围对象的间距。
<img src="图片文件路径" hspace="水平间距" vspace="垂直间距">
语法说明
可以根据需要只设置水平间距或是垂直间距，间距的单位是像素。
eg
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置图片与周围对象的路径</title>
</head>
<body topmargin="0" leftmargin="0">
<img src="C:\Users\ASUS\Desktop\大草莓王嘉尔\little ga.jpg" width="160" ><br/>
<img src="C:\Users\ASUS\Desktop\大草莓王嘉尔\little ga.jpg" width="160" vspace="2" height="5">
You don't call me baby,You call me my name.But I keep on hoping,Nothing has changed.
We keep on touching,But we don't.feel.Feels like you're letting,Your hands off the wheel.
What if I just hold on for a while.
Baby there's no d**g quite like denial.
Ooh my If this is goodbye.
Don't leave me loving you,Whatever you do.Don't leave me loving you
</body>
</html>
6.2.4设置图片的对齐方式
默认情况下，插入的图片在水平方向放置在后面对象的左边，在垂直方向则与周围对象的底端对齐。我们可以使用图片的align属性修改它的对齐方式。
基本语法
<img src="图片文件路径" align="对齐方式">
语法说明
align属性的取值如下表
| 属性值 | 描述 |
|---|---|
| top | 图片顶端与周围对象的顶端对齐 |
| bottom | 图片底端与周围对象底端对齐 |
| middle | 图片的中间与周围对象底端对齐 |
| left | 图片在后面对象的左边 |
| right | 图片在后面对象的右边 |
6.2.5设置图片的边框
默认情况下，插入的图片是没有边框的、有时在我们设计网页时为了获得某种效果，需要让图片显示边框。设置图片的边框可以使用图片的border属性。
基本语法
<img src="图片文件路径" border="边框宽度">
语法说明
“边框宽度”的单位是像素，最小值是1.
扫一扫
3685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
