第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

(3)
江山如画的头像江山如画管理团队
上一篇 2018年1月19日 下午9:15
下一篇 2018年1月20日 下午2:05

99%的人还看了以下文章

  • CSS制作简洁的栏目/标题样式

    CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…

    2019年1月5日
    7.8K0
  • div+css实现面包屑导航-默认竖线分隔、箭头分隔、空白分隔

    div+css实现面包屑导航,主要用到了CSS3伪元素before,大家可以通过本利好好理解before的使用方法,下面125建站网给出实现代码。 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title></title> &…

    2023年1月5日
    6090
  • 网页中的框架(详解)

    所谓框架便是网页画面分成几个框窗,同时取得多个 URL。 一、制作框架页面的步骤: 1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接,在子框架中设定链接。 注意:框架页面是不含标签的 二、基本语法 <frameset> <frame src=”url”> <noframes&g…

    2020年4月11日
    9.8K0
  • css布局基础:浮动和清除浮动练习1

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    2.4K0
  • CSS 实现水平、垂直居中布局代码大全

    CSS实现水平居中 若是行内元素,则直接给其父元素设置text-align: center即可 若是块级元素,则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素,则给父元素设置width:fit-content并且配合margin .parent { width: -webkit-fit-content; width: -moz-fit…

    2019年11月26日
    2.6K0
  • css布局基础-盒子模型

    网页设计的第一步就是设计版面布局,本文介绍了css布局基础-盒子模型,CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin(边界)、border(边框)、padding(填充)和content(内容)4部分组成。

    2022年7月14日
    7400

发表回复

登录后才能评论