7.1 图片标签
在HTML中，我们可以使用img标签来显示一张图片。对于img标签，只需要掌握它的3个属性：src、alt和title。
<img src="" alt="" title="" />
一、src属性
src用于指定这个图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。
所谓的“图片路径”，指的就是“图片地址”，这两个叫法是一样的意思。任何一个图片必须指定src属性才可以显示。也就是说，src是img标签必不可少的属性。
二、alt属性和title属性
alt和title都是用于指定图片的提示文字。一般情况下，alt和title的值是相同的。不过两者也有很大的不同。
（1）使用alt属性时，当我们把“图片路径”去掉（也就是图片无法显示）后，此时可以看到浏览器会显示alt的提示文字 。如果没有加上alt属性值，图片不显示时，就不会有提示文字。
（2）使用title属性时，当我们把鼠标移到图片上时，就会显示title中的提示文字。
在实际开发中，对于img标签，src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。
7.2 图片路径
如果想要显示一张图片，就必须设置该图片的路径（即图片地址）。也就是说，我们必须要设置img标签的src属性。
在HTML中，路径分为两种：绝对路径和相对路径。
（1）绝对路径：指的是图片在你的电脑中的完整路径。
（2）相对路径：指的是图片相对当前页面的位置。
“…/”表示上一级目录
在实际开发中，站内文件不管是图片还是超链接等，我们都是使用相对路径，几乎不会使用绝对路径。
这是因为如果采用绝对路径，网站文件一旦移动，则所有的路径都可能会失效。
且当我们使用绝对路径时，很多编辑器往往都不能把图片的路径解析出来，因此图片无法在网页中显示出来。在真正的网站开发中，对于图片或者引用文件的路径，我们100%都是使用相对路径的。
常见问题：
对于图片或文件，可以使用中文名吗？
不建议使用中文，因为很多服务器是英文操作系统，不能对中文文件名提供很好的支持。所以不管是图片还是文件夹，都建议使用英文名字。
7.3 图片格式
在网页中，图片格式有两种：一种是“位图”；另外一种是“矢量图”。
一、位图
位图，又叫做“像素图”，它是由像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。
在实际开发中，最常见位图的图片格式有3种（可以从图片后缀名看出来）：jpg（或jpeg）、png、gif。深入理解3种图片适合在哪种情况下使用，在前端开发中是非常重要的。
（1）jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg体积较大，并且不支持透明。
（2）png是一种无损格式，可以无损压缩以保证页面打开速度。此外，png体积较小，并且支持透明，不过不适合存储颜色丰富的图片。
（3）gif图片效果最差，不过它适合制作动画。
总结：如果想要展示色彩丰富而高品质图片，可以使用jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用png格式；如果是动画图片，可以使用gif格式。
此外对于位图，我们可以使用Photoshop这个软件来处理。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jpg、png与gif</title>
<style type="text/css">
body{background-color:hotpink;}
</style>
</head>
<body>
<img src="img/1.jpg" alt=""/><br/>
<img src="img/2.png" alt=""/><br/>
<img src="img/3.gif" alt=""/>
</body>
</html>
分析：
body{background-color:hotpink;}表示使用CSS为页面定义一个背景色，以便对比得出哪些图片是透明的，哪些不是透明的。
从这个例子，我们可以很直观地看出来：jpg图片不支持透明，png图片支持透明，而gif图片可以做动画。
二、矢量图
矢量图，又叫做“向量图”，它是用计算机图形学中点、直线或多边形等表示出来的几何图像。
矢量图是以一种数学描述的方式来记录内容的图片格式。举个例子，我们可以使用y=kx来绘制一条直线，当k取不同值时就会绘制不同角度的直线，这就是矢量图的构图原理。
矢量图最大的优点是：图片无论放大、缩小或旋转等都不会失真。最大的缺点是：难以表现色彩丰富的图片效果（非常差）。
矢量图常见格式有：“.ai”、“.cdf”、“.fh”、“.swf”。其中“.swf”格式比较常见，它指的是Flash动画，其他几种格式的矢量图比较少见，可以忽略。
对于矢量图，我们可以使用illustrator或者CorelDRAW这两款软件来处理。
在网页中，很少用到矢量图，除非是一些字体图标（iconfont）。
对于位图和矢量图的区别，我们总结有以下4点。
（1）位图适用于展示色彩丰富的图片，而矢量图不适用于展示色彩丰富的图片。
（2）位图组成单位是“像素”，而矢量图组成单位是“数学向量”。
（3）网页中的图片绝大多数都是位图，而不是矢量图。
常见问题：
1、现在的前端开发工作，还需要用到切图吗？
在Web1.0时代，切图是一种形象的说法，它指的是使用Photoshop把设计图切成一块一块的，然后再使用Dreamweaver拼接起来，从而合成一个网页。
到了Web2.0时代，我们依旧有切图一说，只不过这种切图不再是以前那种方式。现在所说的切图不是将图片切片，而是一种设计思路。现在的切图，指的是我们前端工程师拿到UI设计师的图稿时，应该分析页面的布局，哪些用CSS实现，哪些用图片实现，而哪些用CSS Spirit实现，等等。
在Web2.0时代，我们仍然需要掌握Photoshop的一些基本操作。不过我们在开发页面时，就不应该使用Web1.0时代的“拼图”方式了。
2、如果我从事前端开发，对于Photoshop要掌握到什么程度呢？
一个真正的前端工程师，需要能用Photoshop来进行基本的图片处理，例如图片切片、图片压缩、格式转换等。不过如果时间精力有限，我们不必太过于深入，掌握基本操作就完全够了。
以上学习参考绿叶学习网
1599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
