前端学习 Day3
2019-10-28 本文已影响0人
骑猪的baba
1.图片标签
- 图片标签用于将网页外部图片引入网页,是一个自结束标签
- 属性
- src 表示图片引入的路径
- alt 如果图片显示不出来时,提示图片内容,同时,也是搜索引擎收录图片的依据,如果没有alt 属性则图片不收录
- width 和 height 两个属性分别表示图片宽度和长度。他们默认单位为px, 同时如果只指定一个值,另外一个值就会跟着等比例缩放。否则按照按照设置的两个值显示。特别,除了自适应页面,一般不建议设置这两个值

- 图片的相对路径
src属性的值是相对于当前资源所在目录的位置
假设:当前资源所在目录,比如说网页保存在c 盘下面home文件夹下img的位置
- 如果img文件夹里面有一个图片叫go.gif ,那么该路径为src =“go. gif ”
- 如果将img文件夹拷贝c盘根目录下,此时,图片位于当前资源所在目录的上级目录需要使用退出当前目录到上级目录,使用符号”../"该路径为src ="../img /go. gif "。
注意:返回几级目录,用几个”../”。

3.图片的格式
图片的三种格式:
- jpg
保存颜色比较丰富,图片支持压缩,不支持透明。因此一般用来保存照片等颜色比较丰富的图片 - png
保存颜色丰富,图片支持复杂透明。因此用于保存颜色多的复杂透明图片 - gif
保存颜色少,只支持简单透明(支持直线透明,曲线不透明)支持动态图片。因此图片颜色单一或者动态图可以使用gif保存
图片使用原则:
- 效果不一致,使用效果好的
- 效果一致,小的