路径.jpg
基础
路径是计算机中非常重要的一个概念。路径是做什么用的呢？下面的一句歌词是非常形象的。
我所有的一切都只为找到它，哪怕付出忧伤代价。--《快乐老家》
我们的"它"是我们HTML需要引用的文件，路径就是用来找到文件的。HTML中有很多地方用到了路径(参见附录)，路径错误也是前端工程师经常遇到的错误，不免“付出忧伤代价”。不过，按照下面的方法使用完全秒杀所有的路径问题。（Linux与Windows有少许区别，下文中的路径没有特殊说明是指Windows路径）
| 概念 | 例子 |
|---|---|
| 路径 | C:\中国\陕西\西安\高新区\西部国际广场.jpg |
| 盘符 | C: |
| 目录(文件夹) |
中国 陕西 西安 高新区
|
| 文件 | 西部国际广场.jpg |
| 分隔符 | \ |
说明/是一个比较通用的分隔符，而\是windows特有的并且默认的分割符。
- 绝对路径(Absolute Path)
从最顶层盘符开始的路径。绝对路径开头一定是盘符(Linux是根目录)。 - 相对路径(Relative Path)
从当前文件开始到目标文件的路径。相对路径使用.\表示当前目录，..\表示上一层路径。
实践
- 如何获得绝对路径
获取文件的绝对路径非常简单，有如下两种简单方式- 方法一
打开文件所在的文件夹，把地址栏上的目录和文件名用分隔符
\接到一起就OK了。例如上图中的绝对路径就是C:\中国\陕西\西安\高新区\西部国际广场.jpg
- 方法二
打开文件属性，把【位置】与文件名用分隔符\接到一起就OK了。例如上图中的绝对路径就是C:\中国\陕西\西安\雁塔区\大雁塔.jpg
最佳实践
如果当前文件与目标文件在不同磁盘上(盘符都不一致)，当前文件只能使用目标文件的绝对路径。
- 如何获得相对路径
- 情况一
当公共目录正好是当前文件的目录时，用.\代替目标文件公共目录，就是它的相对路径。例如：
公共目录是C:\中国\陕西\西安\高新区\\，正好是当前文件的目录，所以，把目标文件中的C:\中国\陕西\西安\高新区\\，换成.\，就是目标文件的相对路径。
同样，即使目标文件目录比本地文件深，满足这个条件(公共目录=当前文件的目录)，也是一样的，只需要把目标文件绝对路径中的公共目录换成.\就好。
-
情况二
如果当公共目录不是本地文件的目录时，只需要三步就能把目标文件绝对路径转换成相对路径。
-
把两个绝对路径中的公共目录去掉。
- 把当前文件路径中的文件夹，都替换成
..
-
把当前文件前面的替换后目录，接到目标路径上。得到目标文件相对于当前文件的相对路径。
再复杂的路径，上面三步也可以完成转化。
-
最佳实践
- 在HTML中引用路径要使用相对路径。
- 路径中的分割符使用斜线
/。
附录
在如下中会遇到路径问题
- HTML标签
img[src]a[href]bgsound[src]form[action]frame[src][background]- CSS
link[href]{background-image:url( )}
- Javascript
script[src]- HTML5
video[src]audio[src]
练习
| No. | 当前文件路径 | 目标文件路径 | 相对当前文件的相对路径 |
|---|---|---|---|
| 1 | C:\1\2\3\index.html |
C:\1\2\3\image.png |
|
| 2 | C:\1\2\3\index.html |
C:\1\2\3\4\image.png |
|
| 3 | C:\1\2\3\index.html |
C:\1\2\3\4\5\6\image.png |
|
| 4 | C:\1\2\3\index.html |
C:\1\2\image.png |
|
| 5 | C:\1\2\3\index.html |
C:\1\image.png |
|
| 6 | C:\1\2\3\index.html |
C:\1\other\3\4\image.png |
|
| 7 | C:\1\2\3\index.html |
E:\1\2\3\4\5\image.png |
有兴趣的童鞋可以试着做一下这个练习，把答案写在评论中。
