HTML相对路径怎么写? HTML的相对路径怎么写。
html\u4e2dimg\u7684src\u76f8\u5bf9\u8def\u5f84\u600e\u4e48\u5199\uff1fhtml\u4e2dimg\u7684src\u76f8\u5bf9\u8def\u5f84\u7684\u5199\u6cd5\uff1a
\u540c\u4e00\u4e2a\u76ee\u5f55\u7684\u6587\u4ef6\u5f15\u7528---\u76f4\u63a5\u5199\u5f15\u7528\u6587\u4ef6\u540d\u5373\u53ef\u3002\u5982\u679c\u6e90\u6587\u4ef6\u548c\u5f15\u7528\u6587\u4ef6\u5728\u540c\u4e00\u4e2a\u76ee\u5f55\u91cc\uff0c\u76f4\u63a5\u5199\u5f15\u7528\u6587\u4ef6\u540d\u5373\u53ef\uff0c\u8fd9\u65f6\u5f15\u7528\u6587\u4ef6\u7684\u65b9\u5f0f\u5c31\u662f\u4f7f\u7528\u76f8\u5bf9\u8def\u5f84\u3002
\u4f8b\u5982\uff1a
\u6211\u4eec\u73b0\u5728\u5efa\u4e00\u4e2a\u6e90\u6587\u4ef6info.html\uff0c\u5728info.html\u91cc\u8981\u5f15\u7528index.html\u6587\u4ef6\u4f5c\u4e3a\u8d85\u94fe\u63a5\u3002
\u5047\u8bbeinfo.html\u8def\u5f84\u662f\uff1ac:/Inetpub/wwwroot/sites/blabla/info.html\u5047\u8bbeindex.html\u8def\u5f84\u662f\uff1ac:/Inetpub/wwwroot/sites/blabla/index.html\u5728info.html\u52a0\u5165index.html\u8d85\u94fe\u63a5\u7684\u4ee3\u7801\u5e94\u8be5\u8fd9\u6837\u5199\uff1a
\u8fd9\u662f\u8d85\u8fde\u63a5Notice:
\u5982\u4f55\u8868\u793a\u4e0a\u7ea7\u76ee\u5f55../\u8868\u793a\u6e90\u6587\u4ef6\u6240\u5728\u76ee\u5f55\u7684\u4e0a\u4e00\u7ea7\u76ee\u5f55\uff0c../../\u8868\u793a\u6e90\u6587\u4ef6\u6240\u5728\u76ee\u5f55\u7684\u4e0a\u4e0a\u7ea7\u76ee\u5f55\uff0c\u4ee5\u6b64\u7c7b\u63a8\u3002
\u5047\u8bbeinfo.html\u8def\u5f84\u662f\uff1ac:/Inetpub/wwwroot/sites/blabla/info.html\u5047\u8bbeindex.html\u8def\u5f84\u662f\uff1ac:/Inetpub/wwwroot/sites/index.html\u5728info.html\u52a0\u5165index.html\u8d85\u94fe\u63a5\u7684\u4ee3\u7801\u5e94\u8be5\u8fd9\u6837\u5199\uff1a
\u8fd9\u662f\u8d85\u8fde\u63a5
\u5047\u8bbeinfo.html\u8def\u5f84\u662f\uff1ac:/Inetpub/wwwroot/sites/blabla/info.html\u5047\u8bbeindex.html\u8def\u5f84\u662f\uff1ac:/Inetpub/wwwroot/index.html\u5728info.html\u52a0\u5165index.html\u8d85\u94fe\u63a5\u7684\u4ee3\u7801\u5e94\u8be5\u8fd9\u6837\u5199\uff1a
index.html\u5047\u8bbeinfo.html\u8def\u5f84\u662f\uff1ac:/Inetpub/wwwroot/sites/blabla/info.html\u5047\u8bbeindex.html\u8def\u5f84\u662f\uff1ac:/Inetpub/wwwroot/sites/wowstory/index.html\u5728info.html\u52a0\u5165index.html\u8d85\u94fe\u63a5\u7684\u4ee3\u7801\u5e94\u8be5\u8fd9\u6837\u5199\uff1a
index.html
Notice\uff1a\u5982\u4f55\u8868\u793a\u4e0b\u7ea7\u76ee\u5f55\u5f15\u7528\u4e0b\u7ea7\u76ee\u5f55\u7684\u6587\u4ef6\uff0c\u76f4\u63a5\u5199\u4e0b\u7ea7\u76ee\u5f55\u6587\u4ef6\u7684\u8def\u5f84\u5373\u53ef\u3002
\u5047\u8bbeinfo.html\u8def\u5f84\u662f\uff1ac:/Inetpub/wwwroot/sites/blabla/info.html\u5047\u8bbeindex.html\u8def\u5f84\u662f\uff1ac:/Inetpub/wwwroot/sites/blabla/html/index.html\u5728info.html\u52a0\u5165index.html\u8d85\u94fe\u63a5\u7684\u4ee3\u7801\u5e94\u8be5\u8fd9\u6837\u5199\uff1a
\u8fd9\u662f\u8d85\u8fde\u63a5
\u5047\u8bbeinfo.html\u8def\u5f84\u662f\uff1ac:/Inetpub/wwwroot/sites/blabla/info.html\u5047\u8bbeindex.html\u8def\u5f84\u662f\uff1ac:/Inetpub/wwwroot/sites/blabla/html/tutorials/index.html\u5728info.html\u52a0\u5165index.html\u8d85\u94fe\u63a5\u7684\u4ee3\u7801\u5e94\u8be5\u8fd9\u6837\u5199\uff1a
\u8fd9\u662f\u8d85\u8fde\u63a5
HTML\u7edd\u5bf9\u8def\u5f84\uff1a
\u5728\u6211\u4eec\u5e73\u65f6\u4f7f\u7528\u8ba1\u7b97\u673a\u65f6\u8981\u627e\u5230\u9700\u8981\u7684\u6587\u4ef6\u5c31\u5fc5\u987b\u77e5\u9053\u6587\u4ef6\u7684\u4f4d\u7f6e\uff0c\u800c\u8868\u793a\u6587\u4ef6\u7684\u4f4d\u7f6e\u7684\u65b9\u5f0f\u5c31\u662f\u8def\u5f84\uff0c\u4f8b\u5982\u53ea\u8981\u770b\u5230\u8fd9\u4e2a\u8def\u5f84\uff1ac:/website /img/photo.jpg\u6211\u4eec\u5c31\u77e5\u9053photo.jpg\u6587\u4ef6\u662f\u5728c\u76d8\u7684website\u76ee\u5f55\u4e0b\u7684img\u5b50\u76ee\u5f55\u4e2d\u3002\u7c7b\u4f3c\u4e8e\u8fd9\u6837\u5b8c\u6574\u7684\u63cf\u8ff0\u6587\u4ef6\u4f4d\u7f6e\u7684\u8def\u5f84\u5c31\u662f\u7edd\u5bf9\u8def\u5f84\u3002\u6211\u4eec\u4e0d\u9700\u8981\u77e5\u9053\u5176\u4ed6\u4efb\u4f55\u4fe1\u606f\u5c31\u53ef\u4ee5\u6839\u636e\u7edd\u5bf9\u8def\u5f84\u5224\u65ad\u51fa\u6587\u4ef6\u7684\u4f4d\u7f6e\u3002\u800c\u5728\u7f51\u7ad9\u4e2d\u7c7b\u4f3c\u4ee5http://www.ajaxstu.com/img/photo.jpg\u6765\u786e\u5b9a\u6587\u4ef6\u4f4d\u7f6e\u7684\u65b9\u5f0f\u4e5f\u662f\u7edd\u5bf9\u8def\u5f84\u3002
HTML\u7edd\u5bf9\u8def\u5f84(absolute path)\u5728\u7f51\u9875\u5236\u4f5c\u4e2d\u6307\u5e26\u57df\u540d\u7684\u6587\u4ef6\u7684\u5b8c\u6574\u8def\u5f84\u3002
\u5047\u8bbe\u4f60\u6ce8\u518c\u4e86\u57df\u540dhttp://www.ajaxstu.com\uff0c\u5e76\u7533\u8bf7\u4e86\u865a\u62df\u4e3b\u673a\uff0c\u4f60\u7684\u865a\u62df\u4e3b\u673a\u63d0\u4f9b\u5546\u4f1a\u7ed9\u4f60\u4e00\u4e2a\u76ee\u5f55\uff0c\u6bd4\u5982www\uff0c\u8fd9\u4e2awww\u5c31\u662f\u4f60\u7f51\u7ad9\u7684\u6839\u76ee\u5f55\u3002
\u5047\u8bbe\u4f60\u5728www\u6839\u76ee\u5f55\u4e0b\u653e\u4e86\u4e00\u4e2a\u6587\u4ef6default.asp\uff0c\u8fd9\u4e2a\u6587\u4ef6\u7684\u7edd\u5bf9\u8def\u5f84\u5c31\u662f\uff1a font color="#0058db">http://www.ajaxstu.com/default.asp\u3002
\u5047\u8bbe\u4f60\u5728www\u6839\u76ee\u5f55\u4e0b\u5efa\u4e86\u4e00\u4e2a\u76ee\u5f55\u53ebarchives\uff0c\u7136\u540e\u5728\u8be5\u76ee\u5f55\u4e0b\u653e\u4e86\u4e00\u4e2a\u6587\u4ef62886.html\uff0c\u8fd9\u4e2a\u6587\u4ef6\u7684\u7edd\u5bf9\u8def\u5f84\u5c31\u662fhttp://www.ajaxstu.com/archives/2886.html\u3002
你用法没有错误，你错就错在斜杠上你应该用正斜杠(/)而不是用反斜杠(\).
在html里面引用外部image,或者html都是./这样写的。例如A，B是2个页面并且在同一个目录下。你要在B中点击时候跳转到A页面你就要这样写<a href="A.html" />
如果A在B的上级目录下你要在B中点击跳转到A你就要这样写了<a href="../A.html"/>,此时2个点就定位到了B的上级目录，也就是和A同一个目录了，这就是相对定位。
具体代码看下图
扩展资料:
比如html中想使用<img>标签来引入一个图片，那图片的引用src属性就涉及到一个路径问题。
相对路径指的是什么呢？指的就是相对于当前资源（当前资源现在指的就是html文件的位置）所在目录的位置。
1.比如一个文件夹叫hello
里面的文件一个叫demo.html
另一个叫2.jpg
则在demo.html中引用2.jpg文件时就可以直接写<img src="2.jpg" alt="这是一只大松树">,因为2.jpg现在相对于demo.html（当前资源）所在的目录hello,是直接在文件夹中的，所以正确。
2、当不在一个目录下时，怎么办?比如此时有了另一个文件夹world与hello文件夹并列，2.jpg此时位于world文件夹中，此时该如何引用呢？
答案： ../可以返回上一级目录，需要返回几级目录就写几个../
此时可以写作<img src="../world/2.jpg">即可。
HTML写相对路径的代码：
<html>
<body>
<center>
小说
<p><a href="/jinyong/sd.html">《射雕英雄传》</a>
<a href="/gulong/scj.html">《长生剑》</a></p>
</p></body>
</html>
相对index.html所有的目录而言：
“../”表示上一级目录开始
“./”表示当前同级目录开始
“/”表示根目录开始。
扩展资料
建一个源文件info.html，在info.html里要引用index.html文件作为超链接。
表示源文件所在目录的上一级目录，
假设info.html路径是：c:\Inetpub\ww wroot\sites\blabla\info.htm l
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\index.html
html文件作为超链接。c:\Inetpub\wwwroot.
在info.html加入ind ex.html超链接的代码应该这样写：index.html
参考资料：百度百科 相对路径
html中的相对路径：
../表示目录的上一级
例如：一个网站文件夹text里有HTML、JS、CSS....文件夹，HTML文件夹有个text.html， JS文件夹有个text.js， CSS文件夹中有个text.css。
则在text.html中引用text.js和text.css则可用这段代码：
<link rel="stylesheet" href="../CSS/text.css">
<script type="text/javascript" src="../JS/text.js"></script>
./表示同级目录
如：一个网站文件夹text里有HTML文件夹，text.js，text.css，HTML文件夹有个text.html，
则在text.html中引用text.js和text.css则可用这段代码：
<link rel="stylesheet" href="./text.css">
<script type="text/javascript" src="./text.js"></script>
同级目录直接写文件名称
如：一个文件夹中有text.html，text.js,text.css，则引用为：
<link rel="stylesheet" href="text.css">‘’
<script type="text/javascript" src="text.js"></script>
<html>
<body>
<center>
小说
<p><a href="/jinyong/sd.html">《射雕英雄传》</a>
<a href="/gulong/scj.html">《长生剑》</a></p>
</p></body>
</html>
相对index.html所有的目录而言：
“../”表示上一级目录开始
“./”表示当前同级目录开始
“/”表示根目录开始。
1、<a href="jinyong/sd.html">《射雕英雄传》</a>
表示当前同目录下，有jinyong目录
2、<a href="../gulong/scj.html">《长生剑》</a>
表示上一级目录中，有gulong目录
../../ 这个可以表示上两级目录
3、通过上面的写法，你应该知道怎么操作了
绛旓細HTML鍐欑浉瀵硅矾寰鐨勪唬鐮乴thtml ltbody ltcenter ltpltbody lthtml鐩稿indexhtml鎵鏈夌殑鐩綍鑰岃█鈥溾濊〃绀轰笂涓绾х洰褰曞紑濮 鈥溾濊〃绀哄綋鍓嶅悓绾х洰褰曞紑濮 鈥溾濊〃绀烘牴鐩綍寮濮嬶紱缁濆璺緞鏄粠鐩樼寮濮嬬殑璺緞锛屽舰濡 C\windows\system32\cmdexe 鐩稿璺緞鏄粠褰撳墠璺緞寮濮嬬殑璺緞锛屽亣濡傚綋鍓嶈矾寰勪负C\windows 瑕佹弿杩颁笂杩拌矾寰勶紝...
绛旓細4銆佺浉瀵硅矾寰 xxx/琛ㄧず鏂规硶锛岃〃绀哄綋鍓嶇洰褰曟煇涓洰褰曚笅銆備緥濡 ,涓嬮潰浠ｇ爜琛ㄧず1.jpg浣嶄簬褰撳墠鐩綍images鐩綍涓嬨5銆佺浉瀵硅矾寰 ../琛ㄧず鏂规硶锛岃〃绀哄綋鍓嶇洰褰曠殑涓婁竴绾х洰褰曘備緥濡傦紝html鏂囦欢澶逛笅鏀剧潃index.html锛宨mages鏂囦欢澶逛笅鏀剧潃1.jpg鍥剧墖锛屽湪index.html涓殑鍥剧墖璺緞琛ㄧず鍥剧墖浣嶄簬褰撳墠鐩綍锛堝嵆index.html鎵鍦ㄧ洰褰曪級...
绛旓細background锛歶rl(../images/1.jpg)
绛旓細HTML鐩稿璺緞(Relative Path)鍚屼竴涓洰褰曠殑鏂囦欢寮曠敤濡傛灉婧愭枃浠跺拰寮曠敤鏂囦欢鍦ㄥ悓涓涓洰褰曢噷锛岀洿鎺ュ啓寮曠敤鏂囦欢鍚嶅嵆鍙銆傛垜浠幇鍦ㄥ缓涓涓簮鏂囦欢info.html锛屽湪info.html閲岃寮曠敤index.html鏂囦欢浣滀负瓒呴摼鎺ャ傚亣璁緄nfo.html璺緞鏄細c:\Inetpub\wwwroot\sites\blabla\info.html鍋囪index.html璺緞鏄細c:\Inetpub\wwwroot\...
绛旓細鐩稿璺緞鐨勫眰绾у叧绯绘槸杩欐牱鐨勶紝鍚岀骇鐩綍鐢/鎴栬呬粈涔堜篃涓嶅啓锛屼笂绾х洰褰曠敤../锛屼笅绾х洰褰曞氨鐢ㄧ洰褰曞悕/銆HTML鍐欑浉瀵硅矾寰鐨勪唬鐮侊細<html> <body> <center> </p></body> </html>鐩稿index.html鎵鏈夌殑鐩綍鑰岃█锛氣../鈥濊〃绀轰笂涓绾х洰褰曞紑濮 鈥./鈥濊〃绀哄綋鍓嶅悓绾х洰褰曞紑濮 鈥/鈥濊〃绀烘牴鐩綍寮濮嬨
绛旓細鍦html閲岄潰寮曠敤澶栭儴image,鎴栬卙tml閮芥槸./杩欐牱鍐欑殑銆備緥濡侫锛孊鏄2涓〉闈㈠苟涓斿湪鍚屼竴涓洰褰曚笅銆備綘瑕佸湪B涓偣鍑绘椂鍊欒烦杞埌A椤甸潰浣犲氨瑕佽繖鏍峰啓<a href="A.html" /> 濡傛灉A鍦˙鐨勪笂绾х洰褰曚笅浣犺鍦˙涓偣鍑昏烦杞埌A浣犲氨瑕佽繖鏍峰啓浜<a href="../A.html"/>,姝ゆ椂2涓偣灏卞畾浣嶅埌浜咮鐨勪笂绾х洰褰曪紝涔熷氨鏄拰A...
绛旓細html涓img鐨剆rc鐩稿璺緞鐨勫啓娉曪細鍚屼竴涓洰褰曠殑鏂囦欢寮曠敤---鐩存帴鍐欏紩鐢ㄦ枃浠跺悕鍗冲彲銆傚鏋滄簮鏂囦欢鍜屽紩鐢ㄦ枃浠跺湪鍚屼竴涓洰褰曢噷锛岀洿鎺ュ啓寮曠敤鏂囦欢鍚嶅嵆鍙紝杩欐椂寮曠敤鏂囦欢鐨勬柟寮忓氨鏄娇鐢ㄧ浉瀵硅矾寰勩備緥濡傦細鎴戜滑鐜板湪寤轰竴涓簮鏂囦欢info.html锛屽湪info.html閲岃寮曠敤index.html鏂囦欢浣滀负瓒呴摼鎺ャ傚亣璁緄nfo.html璺緞鏄細c:/Inetpub/...
绛旓細HTML鐩稿璺緞(Relative Path)鐢ㄩ旓細鎸囧畾鐢辫繖涓枃浠舵墍鍦ㄧ殑璺緞寮曡捣鐨勮窡鍏跺畠鏂囦欢锛堟垨鏂囦欢澶癸級鐨勮矾寰勫叧绯 濡傛灉婧愭枃浠跺拰寮曠敤鏂囦欢鍦ㄥ悓涓涓洰褰曢噷锛岀洿鎺ュ啓寮曠敤鏂囦欢鍚嶅嵆鍙紝杩欐椂寮曠敤鏂囦欢鐨勬柟寮忓氨鏄娇鐢ㄧ浉瀵硅矾寰勩備笅闈㈠缓绔嬩袱涓狧TML鏂囨。info.html鍜宨ndex.html锛岀敤浣滅ず渚嬶紝瑕佹眰閮芥槸鍦╥nfo.html鍔犲叆index.html瓒呴摼鎺ャ俥g...
绛旓細2.鐩稿璺緞锛氱敱浜01.html鍜01.js鍦ㄥ悓涓鐩綍涓嬨01.html鏂囦欢瑕佽皟鐢01.js锛屽彲浠ョ敤<script src="01.js"></script>銆傚叾涓殑01.js灏辨槸鐩稿璺緞锛屼篃鍙互鐢<script src="./01.js"></script>銆傚叾涓(娉ㄦ剰鏈夌偣)./01.js涔熸槸鐩稿璺緞锛屾槸鐩稿01.html鐨勮矾寰锛.(鐐)琛ㄧず鏈洰褰曪紝涔熷氨鏄湰鐩綍涓嬬殑01....
