第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网站下载一些图片来用,具体下载方法如下:

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

按以上方法将下面的图片保存到你的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>

该例在浏览器中将显示如下(你可以试试看点击这个图像): 第9课:在网页中添加图像

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

你总要用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网站学习网页制作">

该例在浏览器中将显示如下: 第9课:在网页中添加图像 如果你把鼠标光标停留在该图片上(别点击它),提示文字“上HTML.net网站学习HTML”便会出现。
另外两个重要的属性是width和height: 例7:

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

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

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

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

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

发表评论

登录后才能评论