导入：
字不如表，表不如图，图不如视频。今天我们就来学习图片以及在网页中插入图片。
网页中常用图片格式
常见图片格式有：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="猫打老鼠动画" >
- 绝对路径与相对路径
- 绝对路径：是从根目录（如盘符或网站根目录）开始的路径，形如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>
小结
- 图片的常用格式及特点
- 图片的基本语法
- 图片的常用属性
- 相对路径
网友评论