《HTML之路径问题》

来源：互联网发布：java锁的种类编辑：程序博客网时间：2024/05/19 04:55

当我们想为页面添加图片的时候，我们会有好几种添加方式，可以通过相对路径和绝对路径的方式添加。

【一】相对路径赋值

相对路径就是每次都从.html文件所在的文件夹开始查找。

1、同级

同级是个什么情况呢？同级就是图片和.html文件存储在同一个文件夹中，我们看上面那张图中1.jpg和图片路径问题.html就是同级的。

格式：

<img src="1.jpg" width="50" />

2、下级

下级就是图片保存在上面图中的image文件夹中，所以图片就是在图片路径问题.html下一级

格式：

<img src="image/1.jpg" width="50" />

3、上级

上级就是保存图片的文件夹或者图片与图片路径问题.html所属文件夹是同一级。如果用的是WebStorm的话，是打不开图片的，直接点击.html文件就行了。

格式：

<img src="../1.jpg" width="50" />

【二】绝对路径赋值

绝对路径就是从盘符开始，一直往下查找。如果用的是WebStorm的话，是打不开图片的，直接点击.html文件就行了。

格式：

<img src="C:/Users/Administrator/WebstormProjects/untitled/image/1.jpg" width="50" />

或者

<img src="file://C:/Users/Administrator/WebstormProjects/untitled/image/1.jpg" width="50" />

注意：

1、一般在企业开发中常使用的是下级赋值，因为开发项目时，我们一般都会新建一个文件夹，把所有的图片放在里头。

2、路径中不要出现中文，否则可能出现问题

3、如果使用相对路径来赋值，就不能跨盘符查找

【代码示例】

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>图片路径问题</title></head><body><h1>同级相对路径显示图片</h1><p><img src="1.jpg" width="50" /></p><h2>下级相对路径显示图片</h2><p><img src="image/1.jpg" width="50" /></p><h3>上级相对路径显示图片</h3><p><img src="../1.jpg" width="50" /></p><h4>绝对路径显示图片</h4><p><img src="C:/Users/Administrator/WebstormProjects/untitled/image/1.jpg" width="50" /></p></body>

【结果显示】

阅读全文

0 0