初學者由於對一些比較基本的知識的把握不是很牢，所以在開發或者設計的時候，往往很容易出現一些錯誤或者異常現象而找不到出錯的根源。記得自己剛剛java入門的時候，會出現一些很“離奇”的現象，然后一遍一遍查看自己的代碼，一步一步的進行調試（當然那個時候的調試方式也只是從初學這的角度上而言的，大多是比較粗略的手段），還是發現不了哪里出了問題，這直接打擊學習的積極性。甚至有時候，照着書本或者教學視頻敲的實例代碼也不能正常跑起來，不知道大家有沒有這種悲催的感覺。
比如說，大家在html中通常會導入一些外部的css、js文件，而其中一個比較容易被忽視的問題就是路徑問題，有時候，我們在css、js中都有通過路徑來引入一張圖片的需求，當我們采用相對路徑的時候，在css和js中引用圖片的相對路徑的基准是不一樣的。在css中出現的相對路徑，是以css文件所在路徑為基准的，而js中的路徑則是以導入此js的網頁文件所在的位置為基准的。
為了很好的說明這個問題，我們寫一個簡單的切換圖片的js特效，剛開始的時候，我們讓html有一副默認的背景圖，通過css來設計，而當用戶單擊“切換背景圖”按鈕時，通過javascript代碼來控制背景圖的變更，效果如下：
圖一：更改背景圖之前的效果圖
圖二：更改背景圖之后的效果圖
我們的文件結構是這樣的：
/index.html
/js/chbk.js
/css/style.css
/images/bk1.jpg、bk2.jpg
1. style.css代碼
@charset "utf-8";
/* CSS Document */
body{background-color:#ccc;}
#content{background:url(../images/bk1.jpg) no-repeat;width:200px;height:200px;margin:auto;}
#in{margin:auto;text-align:center;}
其中，url(../images/bk.jpg)路徑是相對於style.css的。
2.chbk.js代碼
// JavaScript Document
function chbk(){
document.getElementById('content').style.backgroundImage='url(images/bk2.jpg)';
}
其中，url(images/bk2.jpg)路徑是相對於index.html的，而不是chbk.js的url(../images/bk.jpg)。
3.index.html代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>引入Html中的css、js的路徑問題</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/chbk.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
</div>
<div id="in">
<input class="in" type="button" value="單擊我更改背景" onclick="chbk()" />
</div>
</body>
</html>
以上說明，對於js和cs中的路徑引用，如果采用相對路徑的話，其基准路徑是有區別的。
通常情況下，js不僅僅是一個html在於，特別對於動態網頁而言，js中的路徑引用應該采用絕對路徑，可以通過定義一個全局變量如path來活動項目的真實路徑（像jsp中就可以用request.getSession().getServletContext().getRealPath("/")），然后在每個路徑上加上path（path+你的路徑）從而取出路徑錯誤的問題。
總結：在css中出現的相對路徑，是以css文件所在路徑為基准的，而js中的路徑則是以導入此js的網頁文件所在的位置為基准的。