整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
了第一节课的基础，大家对页面有了初步得认识，具体怎么实现页面添加图片呢？
首先需要有图片存在于我们的工程项目中，直接复制粘贴到我们的项目中，最好在项目中单独建一个文件夹img用来放图片，把图片直接粘贴到img文件中。
然后找到需要放图片的位置，实现代码，具体如下<img src=“图片路径” alt=“” width=“” />
代码中src指图片具体在什么位置；
alt是指图片加载不出来，显示的文字，用于解释说明图片是干什么用的。
width是指图片的宽度，调整图片大小的。
片
当我们在制作页面的时候，通常会遇到图片的三种表现形式，如下：
1、内容图片
内容图片是页面中真正的内容，没有内容图片，就无法完整的理解页面内容。如淘宝网上的商品展示图片，这些图片是网页的一部分，它们能帮助你决定这个页面的内容是否是你需要的。
内容图片
2、布局图片
布局图片出现在页面背景中，要想理解页面的内容，它们不是必须的。如苹果官网的这个图片，没有这个图片也能理解页面上文字描述的内容是什么意思。
布局图片
3、交互图片
图中用红色框起来的图片会给你浏览页面的时候带来一些帮助，如搜索图片，一看到就知道这里可以搜索想要的东西，购物车图片可以看到选购的产品，箭头图片点击可以看到更详细的产品等。
交互图片
在HTML中我们用 img 标签创建图片，英文是image的缩写。
<img src="" alt="">
内容图片
布局图片是在CSS中被创建出来的，使用CSS中的background属性，如：
1）background-color 定义背景颜色，设置背景图片时，要始终设置背景颜色，确保背景图片没有成功时会显示一个背景颜色
2）background-image 可以指向一个相对路径或者绝对路径来添加图片。
3）background-repeat可以设置背景是否平铺在容器中，包含四个关键字：
4）background-position 属性可以控制背景图片显示在什么位置，包含两个关键字，如：
background-position：top left 设置图片显示在容器的左上角，第一个关键字可以是top、center、bottom，第二个关键字可以是left、center、right
CSS中和背景相关的属性可以简写在一行中，如：
background: #FF1298 url(images/logo.png) center right no-repeat;
首先是图片的颜色color，image，position，repeat，CSS属性能用简写就尽量用简写，简写比分开写性能更高。
布局图片
Web上最常用的三种图像格式
1）Jpeg 可以展示一张照片或者复杂图像
2）png最适合展示网页插画、logo和网页小图标
3）gif适合展示网页插画、logo和网页小图标
建议：
一般情况下用户交互图片都是一些小图标，所以使用png或gif作为用户交互图片；使用CSS的background属性以背景图片的形式为网页添加用户交互图片；推荐把用户交互图片放在同一个文件中，可以提高网络和服务器性能，如：
交互图片
交互图片
具体如何操作呢？后续教头会通过视频给大家详细演示，请继续关注。
维网和其它网络类型最大的区别就是它在网页上可呈现丰富多彩的色彩和图像，还可以播放音频、视频，及把图像作为链接使用。
网络上流行的图片格式主要有jpg、jpeg、png、gif等，以下是这几种格式的介绍。
1、gif格式
gif采用LZW压缩，是以压缩相同颜色色块来减少图像大小。由于LZW压缩不会造成任何品质的损失，且压缩率高，支持动画效果，很适合互联网平台，但是它只支持256种颜色。
2、jpg或jpeg格式
以JPEG有损压缩图片，通常用来保存超过256色的图片格式。JPEG压缩过程会对一些图像数据造成损失，这部分损失不影响图片显示，一般人眼是看不出来差异的。损失数据越多，图片就越不清晰。
3、png格式
png是一种非破坏性的网页图像文件格式，它以最小的方式压缩图片且不造成图片数据损失。它不仅支持像gif大部分优点，还支持48 bit的色彩，跨平台的图像亮度控制，更多层的透明度设置。
网页中通过<img>标签插入图片，语法如下：
<img src="图片路径" alt="替换文本" />具体示例：
<!DOCTYPE HTML>
<html>
<body>
<p>
一幅图像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅动画图像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>
</body>
</html>效果如下：
替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。
<img src="boat.gif" alt="Big Boat">当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好地显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
图像宽度和高度属性
如下代码，在网页中插入一个宽度和高度都是300像素的图片。
<img src="/i/ct_netscape.jpg" width="300px" height="300px" />图片超链接
如下代码，在网页中对一个图片进行超链接设置，点击这张图片就会跳转到其它页面。
<a href="页面路径"><img src="/i/ct_netscape.jpg" /></a>除了对整个图片进行超链接设置外，还可以将图像划分成不同区域进行链接设置，比如一张地图中给每个省份图形进行超链接。
图像热区链接，使用usemap 属性通过#name指定到名叫name的map元素上，map定义了每个热区点击区域形状、大小、坐标等。
area标签的 shape 属性有三种，rect 方形，circle 圆形，poly 多边形。coords 属性定义坐标点位置，相对于图片左上角位置。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>点击太阳或其他行星，注意变化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
<area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
<area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>效果可参考 https://www.w3cschool.cn/html5/html5-img.html 这里。
可以看到鼠标在图片上点击小行星会打开对应的图片。
到此网页中使用图片已经大体介绍了，自己亲手写下，会加深印象，感谢关注。
上篇：前端入门——html 超链接
下篇：前端入门——html 如何在网页中使用视频音频
*请认真填写需求信息，我们会在24小时内与您取得联系。
