前端学习 Day3

1.图片标签

  • 图片标签用于将网页外部图片引入网页,是一个自结束标签
  • 属性
  • src 表示图片引入的路径
  • alt 如果图片显示不出来时,提示图片内容,同时,也是搜索引擎收录图片的依据,如果没有alt 属性则图片不收录
  • width 和 height 两个属性分别表示图片宽度和长度。他们默认单位为px, 同时如果只指定一个值,另外一个值就会跟着等比例缩放。否则按照按照设置的两个值显示。特别,除了自适应页面,一般不建议设置这两个值
图片发自简书App
  1. 图片的相对路径
    src属性的值是相对于当前资源所在目录的位置
    假设:当前资源所在目录,比如说网页保存在c 盘下面home文件夹下img的位置
  • 如果img文件夹里面有一个图片叫go.gif ,那么该路径为src =“go. gif ”
  • 如果将img文件夹拷贝c盘根目录下,此时,图片位于当前资源所在目录的上级目录需要使用退出当前目录到上级目录,使用符号”../"该路径为src ="../img /go. gif "。
    注意:返回几级目录,用几个”../”。
图片发自简书App

3.图片的格式
图片的三种格式:

  • jpg
    保存颜色比较丰富,图片支持压缩,不支持透明。因此一般用来保存照片等颜色比较丰富的图片
  • png
    保存颜色丰富,图片支持复杂透明。因此用于保存颜色多的复杂透明图片
  • gif
    保存颜色少,只支持简单透明(支持直线透明,曲线不透明)支持动态图片。因此图片颜色单一或者动态图可以使用gif保存

图片使用原则:

  • 效果不一致,使用效果好的
  • 效果一致,小的
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 关键词:opacity(透明度), transform:translateZ(往屏幕中心移动) 星球大战 原理:t...
    你喜欢吃青椒吗_c744阅读 383评论 0 0
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,545评论 1 32
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 7,219评论 0 17
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,243评论 0 0
  • day01­_起源和结构 结构:Xhtml xml 表现:CSS 行为:DOM ECMAScript 以上都属于W...
    Sakura_明妃阅读 1,308评论 0 1

友情链接更多精彩内容