04-图片及插入图片

导入：

字不如表，表不如图，图不如视频。今天我们就来学习图片以及在网页中插入图片。

网页中常用图片格式

常见图片格式有：GIF、JPEG、PNG、TIF、BMP等等，在网页中常用的是GIF、JPEG、PNG。

• JPEG格式
  JPEG支持几百万种颜色（电脑最多能显示1600多万种颜色），适合于显示照片等颜色细节丰富的精美图像。不过它是有损压缩，在压缩时会丢失一些图片细节，降低了最终文件的质量。并且可利用压缩比例控制图像文件大小。 并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。JPEG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。
• GIF格式
  GIF格式是一种无损压缩格式。GIF格式可以存多幅彩色图像，不过GIF只支持256种颜色。如果把存于一个GIF文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的GIF动画。GIF只支持1个bit的透明通道，所以只有透明和不透明两种情况。
• PNG格式
  PNG格式理论上是无损压缩，常见的有分PNG8（可保存256种颜色无损失）、PNG24（保存1600多万种颜色）和PNG32(保存1600多万种颜色和256级透明度）。但是图像颜色超过256种颜色而使用PNG8的话，也是会损失颜色。

理论上，PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据等，但是Photoshop等软件目前并不能到达这样的标准。所以我们上面才只介绍PNG8、PNG24和PNG32。

image.png

插入图片的语法与常用属性

属性	描述
alt	图片的替换信息
title	图片的提示信息
width	指定图片显示宽度
height	指定图片显示高度

1.基本语法：<img src="图片文件路径">
2.<img>常用属性

属性	描述
alt	图片的替换信息
title	图片的提示信息
width	指定图片显示宽度
height	指定图片显示高度

3.其它不建议属性:border、align等等。
4.代码示例：
<img src="../images/04-1.jpg" width="100" title="猫在打老鼠" alt="猫打老鼠动画" >

5. 绝对路径与相对路径

• 绝对路径：是从根目录（如盘符或网站根目录）开始的路径，形如C:\windows\system32\cmd.exe
• 相对路径：是从当前路径开始的路径，如当前路径为C:\windows，要描述上述路径，只需输入system32\cmd.exe 。
  相对路径中的一些特殊符号
  .. 表示上一级目录；
  . 表示当前目录，通常可省略
  \ 表示根目录

小提示

• 绝对路径使用较少，但是为防止网站被恶意抄袭，可使用绝对路径，如果有人抄袭采集你的内容，里面的链接还会指向你的网站。有些抄袭的比较懒，连里面的链接一起抄了过去。
• width和height两个属性只设置其中一个属性，则表示另外的一个属性等比例缩放。例如，原图高宽为400x300 px，在img标签中设置height="150"，则网页中图片显示为200x150 px。如果同时设置width="100"和height="100"，则网页中图片显示为100x100 px。

进阶

HTML5中为了提高语义性，增加了figure和figcaption标签，具体如下：

<figure>
<figcaption>图4-1 黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

小结

• 图片的常用格式及特点
• 图片的基本语法
• 图片的常用属性
• 相对路径