07.图像标签

浏览网页时经常会看到精美的图片，图片是组成网页的重要元素，在网页中如何才能显示一个图像呢？

一、图像标记

1、基本语法

图像是用img标记来声明的…

<img src=”图像文件路径地址”/>

注意：

• 任何一个图片标签必须指定src属性才可以显示；
• src属性分为相对路径和绝对路径，具体用法下面会讲；

2、常用属性

在HTML中我们可以通过一些属性来改变图片的外观和表现，常见属性见下面表格：

属性名	含义	常用属性值
alt	图像的替换文本属性，在图像无法显示时告诉用户该图片的内容。	自定义文本
width/height	用来定义图片的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示	像素值（默认为初始大小）
border	为图像添加边框、设置边框的宽度。但边框颜色的调整仅仅通过HTML属性是不能够实现的。	像素值
title	图像的悬停提示文本，在鼠标指针移动到图片上时，会显示title中的文字。	自定义文本
vspace/hspace	HTML中通过vspace和，hspace属性可以分别调整图像的垂直边距和水平边距。	像素值
align	图像的对齐属性align,用于调整图像的位置	left/right/absmiddle

注意：

• 对于img标签，src属性和alt属性，一定要添加；
• 其他属性在需要时添加即可。

二、图像路径

实际工作中，通常新建一个文件夹专门用于存放图像文件。此时，在页面中引入一张图片，需要知道图片在电脑中存放的位置，路径指的就是图片文件或其他文件在电脑中的位置。
![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/
.png?origin_url=%2F1632047116628.png&pos_id=img-PPo0XXrn-1742907135262)

1、绝对路径

绝对路径指的是图片在电脑中的完整路径（盘符开头）或完整的网络地址。

• 例如：D:\HTML+CSS网页制作\chapter02\img\logo.gif
• 例如：http://www.itcast.cn/images/logo.gif

绝对路径存在的问题：

• 项目的可复制性和可移植性比较差，所以在实际开发中，一般都会使用相对路径，几乎不会用绝对路径。

2、相对路径

相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置，简而言之相对路径即图片相对当前页面的位置。

• 图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可

• 图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开

<img src="images/logo.gif" />

• 图像文件位于html文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则使用 “…/ …/”，以此类推

<img src="../logo.gif" />

3、注意事项

• 对于图片和文件名称，建议使用英文，不要使用中文；
• 网站开发中常用的目录结构，如下：

  images+
  js+
  css+
  index.html

三、图片格式

1、位图

1）特点

• 由像素组成的图片，可以使用PS编辑;
• 放大或缩小图片会导致位图图像失真;

2）GIF格式

GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。再加上GIF支持透明（全透明或全不透明），因此很适合在互联网上使用。

GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。

3）PNG格式

PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。

IE6是可以支持PNG-8，但在处理PNG-24的透明时会显示灰色。

4）JPG格式

JPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。

小图片考虑GIF或PNG-8，半透明图像考虑PNG-24，类似照片的图像则考虑JPG。

2、矢量图

1）特点

它是用计算机图形学中点、直线或多边形等表示出来的集合图像，可以使用ai或cdr编辑；

• 最大优点：放大缩小或旋转不会失真；
• 最大缺点：难以表现色彩丰富的图片效果；
• 常见矢量图格式：.ai/.cdf/.fh/.swf。

2）和位图对比

• 位图用于展示色彩丰富的图片，矢量图不适宜展示色彩丰富的图片；
• 位图的组成单位是像素，而矢量图的组成单位是数学向量；
• 位图受分辨率影响缩放失真，矢量图不受分辨率影响，缩放不失真；
• 网页中的图片绝大多数都是位图，而不是矢量图。

3、疑问

• 现在的前端开发工作，还需要用到切图吗？

- Web 1.0时代：切图是一种形象的说法，它指的是使用PS把设计图切成一块一块，然后再用Dreamweaver拼接起来，从而合成一个网页；
- Web 2.0时代：切图更多的是一种设计思路；
- 如果从事前端开发工作，也需要掌握基本的图片处理操作。

• 前端开发工作，ps需要掌握到什么程度呢？

- 会用ps进行基本的图片处理，例如图片切片、图片压缩、格式转换等。
- 不必太过于深入，掌握基本操作就完全够了。