Day2-图片
五、图片
5.1 能用的图片类型
页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。
不能往网页中插入的图片格式是：psd、ai
5.2 语法
HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。
插入方法：
|
1 <img src="baby.jpg" /> |
img是英语image“图片”的简写
src 是英语source“资源”的简写，千万不要写成scr。
src是img标签的属性，baby.jpg是这个属性的值。
这个标签和我们之前学的，都不一样，因为这个标签不是“对儿”。自封闭标签，也称为单标签。
为什么？原因很简单，如果是对儿，里面就要有内容，表示给这个内容增加语义。比如
|
1 <h1>哈哈哈哈，我是主标题啦！！！</h1> |
图片就是一个图片，不需要给什么文字增加语义，所以就是自己一个人活得挺好：
|
1 <img /> |
我们上午学习的meta也是自封闭标签：
|
1 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> |
5.3 alt属性
alt属性：
|
1 <img src="baby.jpg" alt="巴黎结婚照" /> |
alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持）。
5.4 相对路径
HTML中插入图片，所以现在有两个文件，一个html文件，一个是jpg文件。
我们关心的就是这两个文件的相对位置。即使这个网站项目，被用u盘拷给了别人，只要相对路径不变。图片一定能够正常显示。
当图片在文件夹里面的时候：
|
1 <img src="images/baby.jpg" alt="巴黎结婚照" /> |
如果在很深的文件夹中，也不怕，可以一直罗列下去：
|
1 <img src="images/jiehunzhao/baby.jpg" alt="巴黎结婚照" /> |
如果情况变得复杂，我们的图片在浅一层的文件夹中：
|
1 <img src="../3.jpg" alt="" /> |
如果是上两级：
|
1 <img src="../../shizi.jpg" alt="" /> |
还可以更为复杂：
|
1 <img src="../../images/jiehunzhao/baby.jpg" alt="" /> |
上两级的文件夹中的images文件夹中的jiehunzhao的文件夹中的baby.jpg
相对路径不会出现这种情况：
|
1 aaa/../bbb/1.jpg |
../要么不写，要么就写在开头。
标准答案：
|
1 <img src="../../photo/1.png" /> |
解释：
现在document是最大的文件夹，里面有两个文件夹work和photo。work中又有一个文件夹叫做myweb。myweb文件夹里面有index.html。 所以index.html在myweb文件夹里面，上一级就是work文件夹，上两级就是document文件夹。通过document文件夹当做一个中转站，进入photo文件夹，看到了1.png。
