re:从0开始的HTML学习之路 8. 路径问题

1. 路径问题(重要)

无论使用哪种语言编写应用程序,路径问题都至关重要,只要需要引入资源,必定使用路径

2. 物理路径

比如在我的电脑上,图片所在的路径是D:\Working\WEB\dream.gif
如果在HTML中用物理路径引入图片,并在vs code中右键用Live Server运行,就会发现找不到图片,但在磁盘中打开的话就可以找到

<img src="D:\Working\WEB\dream.gif" alt=" ">

这样的话并不能找到图片re:从0开始的HTML学习之路 8. 路径问题_第1张图片
文件系统:通常使用Windows操作系统,项目完成后必须部署到服务器上,而服务器大部分使用Linux系统
Windows和Linux文件系统差别很大,因此实际开发时不允许使用物理路径。

3. 相对路径

相对于当前文件所在的路径
./代表当前路径(可以省略不写,默认为./)
../代表上一级路径
首先要知道当前文件所在的路径
如我目前的路径如下:
re:从0开始的HTML学习之路 8. 路径问题_第2张图片
目前编写的文件是9.path question.html

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>path questiontitle>
head>
<body>
	

	<img src="./dream.gif" alt=" ">
	
body>
html>

再如pages/1.html当前文件所在的路径WEB/pages

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>
head>
<body>
	<img src="../dream.gif" alt="">
	

body>
html>

4. 绝对路径

就是目录下的绝对位置
Live Server提供了一个内置服务器:
http://127.0.0.1:5500/9.%20path%20question.html
服务器的根路径:http://127.0.0.1:5500
项目所在路径:/9.%20path%20question.html
查询名(忽略,看起来Live Server并没有生成这东西)
/ 【斜杠】表示当前项目所在服务器的根路径,从这里开始找所需要的资源即可

<img src="/images/dream.gif" alt="">

这样也可以找到图片

你可能感兴趣的:(学习)