第9课：在网页中添加图像

假如能把自己喜欢的的图像放到网页上，那就太好了。

这貌似有点难度。。。

也许是有点难度，但其实也不难，一个元素就可以搞定： 例1：

<img src="http://www.125jz.com/wp-content/uploads/2018/01/liudehua.jpg"  />

该例在浏览器中将显示如下：你要做的只是：告诉浏览器你要插入一张图片（img），接着给出这张图片的存放位置（src，代表“来源（source）”）就行了。
<img>标签定义HTML页面中的图像，<img>标签有两个必需的属性：src和alt，其语法格式如下：

<img src="URL"  alt="图像说明文本"  width="宽度值"  height="高度值"/>

注意：img元素没有结束标签，它与<br />一样。
src指定要插入的图片的文件名，其中的“jpg”表明图片类型。就像后缀名“htm”代表文件是HTML文档一样，后缀名“jpg”表明文件是一个图片文件。
网页中常用的图像格式有三种：

GIF（Graphics Interchange Format，图形交换格式）
JPG或JPEG（Joint Photographic Experts Group，联合图像专家组）
PNG（Portable Network Graphics，可移植网络图像）

一般来说，GIP是图形和图画的最佳格式，而JPEG格式则更适合存放照片。
JPEG格式：各类浏览器均支持JPEG格式，因为JPEG格式的文件尺寸较小，兼容性好,下载速度快，使得网页有可能以较短的下载时间提供大量美观的图像，JPEG因此成为网络上最受欢迎的图像格式，不仅是一个工业标准格式，而且更是web的标准文件格式。
GIF格式：GIF是CompuServe公司在1987年开发的图像文件格式。GIF分为静态GIF和动画GIF两种，扩展名为.gif。
过去，GIF和JPEG是两大主要的图像格式，但是最近PNG格式也开始流行起来（主要是在取代GIF格式）。PNG格式拥有许多JPEG与GIF的共同优点：支持数百万色，且压缩效果好。

如何获取图片？

要制作自己的图像，需要有一个图像编辑软件。
不幸的是Windows或其他操作系统都没有自带比较好的图片编辑程序。所以，也许你得买一个Paint Shop Pro、PhotoShop或者Macromedia Fireworks，这三个是目前市场上最好的图像编辑软件。
或者，你也可以从我们www.125jz.com网站下载一些图片来用，具体下载方法如下：

右击网页中的图像。
在菜单中选择“图片另存为…”。
选择图片的存放位置，然后点击“保存”。

按以上方法将下面的图片保存到你的HTML文档所在目录。现在你可以把这个图片插入到自己的网页里。自己试试看。

关于图像就这么多吗？

关于图像，还有一些是需要介绍的。
首先，你可以把图片存放在网站的其他文件夹，如images文件夹下。 例2：

<img src="images/pic.png">

还可以直接把其他网站的的图片插入到自己的网页中。 例3：

<img src="http://www.125jz.com/wp-content/uploads/2018/01/125jz.png">

图片也可以作为链接： 例4：

<a href="http://www.125jz.com"><img src="http://www.125jz.com/wp-content/uploads/2018/01/125jz.png"></a>

该例在浏览器中将显示如下（你可以试试看点击这个图像）：

还有什么属性需要了解的吗？

你总要用src属性来告诉浏览器图片的存放位置。除此以外，还有一些有用的属性。alt属性用于给出图像的替用描述，假如由于某些原因该图像未能显示出来，浏览器就通过显示这个描述来替代图像。当网页打开很慢的时候，这一特性显得尤为重要。所以说，要记得写alt属性： 例5：

<img src="wp-content/uploads/2018/01/125jz.png" alt="125jz.com logo">

有些浏览器会在鼠标光标移到图像上时显示出alt属性的文本。但是，在使用alt属性时请注意，该属性的目的是为图片提供一个替用描述，所以不要将该属性用于显示文本提示——那是title属性的功能。相关阅读：图片title和alt的区别 例6：

<img src="wp-content/uploads/2018/01/125jz.png" title="上125jz.com网站学习网页制作">

该例在浏览器中将显示如下：如果你把鼠标光标停留在该图片上（别点击它），提示文字“上HTML.net网站学习HTML”便会出现。
另外两个重要的属性是width和height： 例7：

<img src="http://www.125jz.com/wp-content/uploads/2018/01/125jz.png" width="220" height="40">

该例在浏览器中将显示如下： width和height属性分别用于设置图像的宽度和高度，以像素为单位。
如果你没有为图像设置宽度和高度，它将按原始尺寸显示。但是如果设置了的话，你就可以控制它的显示尺寸： 例8：

<img src="http://www.125jz.com/wp-content/uploads/2018/01/125jz.png" width="110" height="20">

该例在浏览器中将显示如下：需要注意，虽然可以通过设置高度和宽度来控制图片的显示尺寸，但图片文件的实际大小不会因此而发生变化。所以，不要指望通过设置图片的宽度和高度来减小图片文件的大小。相反，如果你只需要放一张尺寸很小的图片，你应该在图像编辑程序中来调整图片文件的大小，以加快页面加载速度。
关于图像就说这么多了，快去在你的网页中添加图片试试吧。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/481.html