图片与路径

  • 一、路径介绍
  • 1.绝对路径
  • 2.相对路径
  • 二、跨级别插入图片
  • 1.同级
  • 2.下级
  • 3.上级
  • 4.综合运用
  • 三、总结
  • 四、扩展


一、路径介绍

1.绝对路径

目录下的绝对位置，可直接到达目标位置，通常指从盘符开始的路径或完整的网址。在html图片的插入中，一般不使用绝对路径，较常用的是相对路径。

2.相对路径

从当前文件开始出发寻找目标文件的过程，经常使用。

二、跨级别插入图片

1.同级

当要插入的图片与创建的html文件在同一级，则可直接插入，src的属性值为“目标文件名.后缀” 或 “./目标文件名.后缀”。在使用编译器进行编码时，若输入同级文件名的首字母，编译器往往会自动跳出其余内容。
代码展示：（假设图片名为photo，jpg格式）

<img src="photo.jpg"> 或 <img src=./photo.jpg>

2.下级

若html文件与file文件夹同级，要插入的图片photo在file文件夹中，则要在html文件中插入photo图片则属于跨级别访问图片操作，代码如下：

<img src="file/photo.jpg">

3.上级

若在文件夹total中有一图片photo和另一文件夹test，html文件在test文件夹中，则在html文件中插入photo图片属于访问上一级文件夹，代码如下：

<img src="../photo.jpg">

若需访问上两级文件夹中的picture图片，则代码为：

<img src="../../picture.jpg">

4.综合运用

若有file1和file2两文件夹，file1中存放html文件，file2中存放要插入的图片flag，格式为jpg，则在html文件中插入flag图片的代码如下：

<img src="../file2/flag.jpg">

（先退到上一级，再访问下一级）

三、总结

HTML中通过img对图片进行操作，实际上就是将我们使用电脑逐步打开各级文件夹的过程用标签语言的属性特征进行描绘。在使用属性值时，尽量使用相对路径，避免因更换电脑而修改路径值。此外，在面对跨多个层级进行对图片的访问时，其思考过程与我们实际中的前进后退过程完全相同，只要理清思路即可对图片进行正确的访问。

四、扩展

若要在浏览器中插入音频或视频该如何操作？音频以及视频能否像图片一样跨级别访问？如想研究音频与视频的使用，请观看下一篇文章。