图片引入标签 img

• 常见图片格式说明
  • .png 静态图片，支持透明
  • .jpg/jpeg 静态图片，不支持透明
  • .gif 动态图片，支持透明 （gif 图片分解器）
  • .webp 网页可以更快的显示
• src 属性

 <!-- 
    img: 显示图片
    src：图片路径，网咯路径或者本地路径(相对路径、绝对路径)
    -->
<img src="https://www.jd.com/favicon.ico" alt="">  //网络路径
<img src="C:\Users\UI\XXX\XXXX\XXX.jpg" alt=""> //绝对路径
<img src="../img/xxx.jpg" alt="">  //相对路径 ，从当前文件位置开始寻找

• 相对路径：

  • “./” 表示 当前文件同级路径
  • “../” 表示 当前文件上一级路径

• alt 属性

  <!-- 当前src引入的图片失效，显示的文本 -->
  
  <img src="https://www.jd.com/favicon.ico" alt="网站图标"> 
  

• width height属性

  
      <!-- width属性  规定图片的宽度 ,height 规定高度，
        这两个当写一个属性的时候，会根据比例自行放缩；两个都写时，可能会造成变形
    -->
  
    两者默认默认单位都是 px  ，所以可以不加px
  
      <img src="https://www.jd.com/favicon.ico" alt="" width="50px"> 
  
     // 加上属性太长，可以换行
  
      <img src="https://www.jd.com/favicon.ico"
      alt="width属性"
      width="50px">
  
  
    <img src="https://www.jd.com/favicon.ico"
      alt="width属性"
      width="50px"
      height= "50px">