HTML必知必会的基础概念--路径

路径.jpg

基础

路径是计算机中非常重要的一个概念。路径是做什么用的呢？下面的一句歌词是非常形象的。

我所有的一切都只为找到它，哪怕付出忧伤代价。--《快乐老家》

我们的"它"是我们HTML需要引用的文件，路径就是用来找到文件的。HTML中有很多地方用到了路径(参见附录)，路径错误也是前端工程师经常遇到的错误，不免“付出忧伤代价”。不过，按照下面的方法使用完全秒杀所有的路径问题。（Linux与Windows有少许区别，下文中的路径没有特殊说明是指Windows路径）

说明/是一个比较通用的分隔符，而\是windows特有的并且默认的分割符。

• 绝对路径(Absolute Path)
  从最顶层盘符开始的路径。绝对路径开头一定是盘符(Linux是根目录)。
• 相对路径(Relative Path)
  从当前文件开始到目标文件的路径。相对路径使用.\表示当前目录，..\表示上一层路径。

实践

• 如何获得绝对路径
  获取文件的绝对路径非常简单，有如下两种简单方式
  • 方法一

• 方法二

打开文件属性，把【位置】与文件名用分隔符\接到一起就OK了。例如上图中的绝对路径就是C:\中国\陕西\西安\雁塔区\大雁塔.jpg

最佳实践
如果当前文件与目标文件在不同磁盘上(盘符都不一致)，当前文件只能使用目标文件的绝对路径。

• 如何获得相对路径
• 情况一
  当公共目录正好是当前文件的目录时，用.\代替目标文件公共目录，就是它的相对路径。例如：
  
  
  公共目录是C:\中国\陕西\西安\高新区\\，正好是当前文件的目录，所以，把目标文件中的C:\中国\陕西\西安\高新区\\，换成.\，就是目标文件的相对路径。
  同样，即使目标文件目录比本地文件深，满足这个条件(公共目录=当前文件的目录)，也是一样的，只需要把目标文件绝对路径中的公共目录换成.\就好。
  

• 情况二
  如果当公共目录不是本地文件的目录时，只需要三步就能把目标文件绝对路径转换成相对路径。

  
  

  1. 把两个绝对路径中的公共目录去掉。

     
     
  2. 把当前文件路径中的文件夹，都替换成 ..
     

  3. 把当前文件前面的替换后目录，接到目标路径上。得到目标文件相对于当前文件的相对路径。

     
     
     
     

     再复杂的路径，上面三步也可以完成转化。

     
     

最佳实践

1. 在HTML中引用路径要使用相对路径。
2. 路径中的分割符使用斜线/。

附录

在如下中会遇到路径问题

• 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]

练习

有兴趣的童鞋可以试着做一下这个练习，把答案写在评论中。