非零基础自学前端最后一遍一 HTML+CSS 2 HTML常见的元素 2.5 img元素的相对路径和图片格式

骑猪看日落 2024-03-26 19:34 27阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  2 HTML常见的元素
         *   *  2.5 img元素的相对路径和图片格式
             *   *  2.5.1 img元素 - 图片的路径
                 *  2.5.2 img元素 - 图片的格式

![在这里插入图片描述][b0c84f440d304de9873d3997dd4c6012.png_pic_center]

#### 一 HTML+CSS ####

#### 2 HTML常见的元素 ####

##### 2.5 img元素的相对路径和图片格式 #####

###### 2.5.1 img元素 - 图片的路径 ######

*  设置img的src时，需要给图片设置路径：
    
     *  网络图片：一个URL地址（后续会专门讲URL）；
        
         *  网络图片的设置非常简单，给一个地址即可；
        
        ![在这里插入图片描述][fa673433683d4a8db99acc8b1e1de59c.png_pic_center]
        
        ![在这里插入图片描述][9f0983d5d0c44ad1ad3e7baa4cdd8dfb.png_pic_center]
     *  本地图片：本地电脑上的图片，后续会和html一起部署到服务；
 *  本地图片的路径有两种方式：
    
     *  方式一：绝对路径（几乎不用）； ✓ 从电脑的根目录开始一直找到资源的路径；
        
        ![在这里插入图片描述][e77c27f139c34e1d8701c2e0c6ac0d14.png_pic_center]
        
        当然现在是因为我们开启了一个服务，如果不用这种方式
        
        ![在这里插入图片描述][cd6d70cc66a64833aed3fd79a3fab6d6.png_pic_center]
        
        这样是可以的
     *  方式二：相对路径（常用）； ✓ 相当于当前文件的一个路径； ✓ . 代表当前文件夹（1个.），可以省略 ✓ … 代表上级文件夹（2个.）
        
        ![在这里插入图片描述][ba62df15d5e94d47a53bec1fc1e458f5.png_pic_center]
 *  对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 /，而不是 \\

###### 2.5.2 img元素 - 图片的格式 ######

img元素支持的图片格式非常多：

![在这里插入图片描述][ae87db02ad9842b281aa81289c94842a.png_pic_center]

[b0c84f440d304de9873d3997dd4c6012.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/377eeb445a204f539cb3fff27dbd090b.png
[fa673433683d4a8db99acc8b1e1de59c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9be31c83c0c8447cac11b7e7fbff6c78.png
[9f0983d5d0c44ad1ad3e7baa4cdd8dfb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c6689760093846eeb61850ec8f45ca28.png
[e77c27f139c34e1d8701c2e0c6ac0d14.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/666ac9ab199f45828e9edf25efcb83c2.png
[cd6d70cc66a64833aed3fd79a3fab6d6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6522310258d94368b44b392292d3bf34.png
[ba62df15d5e94d47a53bec1fc1e458f5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ff4fc6868e364a618a8ace57af6c5bd8.png
[ae87db02ad9842b281aa81289c94842a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/46ca06dcad2346cbb61a761e5fe61d2e.png