育知同创-专注移动互联网,专注强师高品质课程|Android培训|HTML5培训|Java培训|VR培训

加入收藏 关于我们 咨询电话:010-82583705
北京
其他分校: 深圳 大连 武汉

▶ 您现在的位置:首页 > 视频教程 > 《Mars亲授HTML5开发视频教程》第06讲-图片

《Mars亲授HTML5开发视频教程》第06讲-图片

时间:2016-05-24 16:36:22  来源:育知同创  作者:育知

  •  HTML5学习QQ群: 339367359

     

     

    主要内容

    1、图片在网页当中承担的责任

    2、img标签的基本使用方法

    3、使用相对路径访问图片

    4、拉伸图片

     

    图片在网页当中承担的责任

    在关于链接的课程当中,我们曾经跟大家说链接是整个互联网的基石,是将各种类型的资源以超越文本的方式连接起来的方法,总而言之就是狂拽酷炫吊炸天,可以说是互联网技术的内涵担当。今天我们要为大家介绍的图片则是互联网技术的颜值担当。

     

    tupian.jpg

     

    根据脑科学家的研究,人脑是非常复杂而且奇怪的机器。通常来说图片的内容要比文字内容复杂的多,但是偏偏我们的大脑就喜欢这种复杂的数据,而且非常的善于处理这种复杂的数据。一张图片放在我们面前,只需要不到一秒钟的时间,我们就可以将图片但中传递的大部分有价值的信息接收到位,这种能力就连目前的超级计算机也很难做到。

     

    所以说人们非常偏爱有图片的网页,如果网页当中的图片是时下流行的各种小鲜肉的照片,那就更好了,恐怕就会惹得大票的用户疯狂舔屏。

     

    所以说一个网页是否能够让用户一眼就喜欢上,图片将会起到非常重要的作用。 在HTML当中,在网页上放置图片需要使用img标签,本节课我们就将重点为大家介绍img标签的使用方法。

     

    img标签的基本使用方法

     

    QQ图片20160524162205.jpg

     

    img标签的作用是在网页上放置一张图片,但是从技术的角度上来说,该标签不是在网页上插入图像,而是在网页上插入一个图像的链接。具体的做法是在网页中需要放置图片的位置上插入img标签,并设置其src属性,为其指定一个图片的路径:

     

    <img src="图片路径">

     

    浏览器在执行这行代码时,将会依据src所指定的路径去寻找图片,并将其插入到网页中img标签的位置上。这样就完成了在网页当中展示图片的操作。

     

    但是万一浏览器在该路径上没有找到图片怎么办?没有找到图片的原因有很多种,比如说由于我们粗心导致把图片的路径写错了,也有可能是一个猪一样的队友把我们精心挑选的图片给删掉了等等。

     

    这个时候就会在网页上显示一个非常尴尬的标识,不同的浏览器可能略微有些区别,但是总体上来说这个标识的意思就是没有找到图片。为了避免这个问题出现,我们一方面要仔细的检查自己的代码避免写错,也要仔细的观察自己的同事当中有没有猪一样的队友。另一个方面我们也可以为图片提供一个替代的显示方案。

     

    img标签还有一个名为alt的属性,这个属性的值是一段字符,当图片由于各种原因无法显示的时候,浏览器会将这段文字展示在网页当中。

     

    <img src="图片的路径" alt="备用的文字">

     

    以上就是img标签最基本的使用方法。

     

    使用相对路径访问图片

    刚才我们提到其实img标签是在网页上插入一个图像的链接,src属性用于指定访问图片的路径,这个时候就需要使用到在上节课当中讲解的相对路径。

     

    在日常的网站开发当中,通常网页和图片并不会放在同一个文件夹当中。所以此时使用的相对路径就比较的复杂,下面就让我们看看典型的网站目录结构,以及在这种结构下如何使用相对路径访问图片。

     

    通常一个网站都会存在两个目录,一个名为pages,该目录当中主要放html文件。另一个目录名为images,该目录当中主要存放图片文件。

     

    图片的拉伸

    图片除了可以用于展示信息,还可以作为网站的背景。此时需要使用到img标签的width和height属性,这两个属性的值用于设置图片的宽度和高度。

     

     <img src="图片的路径" alt="备用的文字" width="100px" height="200px">

     

    使用如上的标签可以将图片的宽和高设置放大或者缩小到制定的大小,其中px表示的是像素,目前大家只要知道它是表示长度的单位,我们在随后的课程当中会专门的为大家介绍网页当中长度单位的使用方法。

     

    除了可以使用px作为长度单位之外,还可以使用百分比。例如:

    以上代码的作用是将图片放大或者缩小至浏览器窗口的50%大小。但是此时有可能会导致图片变形。我们也可以只设置宽度或者是高度,省略掉另外的一个属性,这样图片在缩放的过程当中依然会保持原有的宽高比,不会产生变形扭曲。

     

    那么这项技术和网页的背景有什么关系呢?

     

    假如说客户要求在网页当中的某一个区域需要使用绿色的背景,大小是整个浏览器窗口的20%,那么我们就有两个选择,一个选择是做一张纯绿色的图片,将其大小调整为浏览器窗口的20%。另一个选择是使用一个只包含一个像素大小的绿色图片,将其宽高拉伸到浏览器宽度的20%。

     

    首先从视觉效果上来看,两者没有任何的差异,但是第二种方法所使用的图片只有一个像素大小,比第一种方案所使用的图片要小的多,这样就可以大幅度的降低网页的大小,提升网页的加载速度。

     
     
    往期回顾

    《Mars亲授HTML5开发视频教程》第00讲-课程综述

    《Mars亲授HTML5开发视频教程》第01讲-学习方法

    《Mars亲授HTML5开发视频教程》第02讲-第一个HTML程序

    《Mars亲授HTML5开发视频教程》第03讲-文本标签

    《Mars亲授HTML5开发视频教程》第04讲-超链接与锚点

    《Mars亲授HTML5开发视频教程》第05讲-神马是路径





上一篇:《Mars亲授HTML5开发视频教程》第05讲-神马是路径

下一篇:《Mars亲授HTML5开发视频教程》第07讲-列表


开班信息

Copyright 2016 北京育知同创科技有限公司 京ICP备16004053号