郑重申明和郑重声明:关于站点目录下文档之间相互链接时“相对路径”代码的初探

关于站点目录下文档之间相互链接时“相对路径”代码的初探

2010-09-04 14:54:57|  分类： 技术讨论帖 |  标签：相对路径  asp.net2.0  html语言     字号：大中小 订阅

教材《ASP.NET2.0 动态网站开发教程（第2版）》P38（文中HTML代码用蓝色字体标出）

       这道综合示例题我是在Dreamweaver 8上用拆分视图的方式做的，但不是可视化操作，而是亲手输入HTML代码，以观察界面上内容的变化。总体来说，这题很简单。只要了解了HTML代码这些个标记的意义和功用，敲入代码时对将会产生的效果样式心中其实是一目了然的。
       唯一让我有点脑筋绕不过弯的就是在做页面相互间的链接时，关于文档路径的代码写法。对于我这同一站点下的3个页面，我不知道该用“相对路径”还是“根相对路径”。看书上的概念时，对“相对路径”比较理解，但对“根相对路径”的定义倒有些含糊不清，“是指从站点根目录到被链接文件的路径”。
       在这里首先要搞清楚一点：这代码路径（URL），与电脑硬盘上的路径的表示方法，这个斜杠符号不一样：代码里是“/”，而电脑地址栏上的是反斜杠：“\”。
       我的站点根目录是文件夹“3.6综合示例”，里面有Z1、Z2、Z3三个文件夹，一个嵌套一个。现在要在位于Z2目录下的C页中面插入一张“湖光山色”的图片，链接的是Z3目录下的“湖光山色.jpg”，那这个src属性代码该怎样写呢？是src="Z3/湖光山色.jpg" ？还是src="3.6综合示例/Z1/Z2/Z3/湖光山色.jpg" ？经过我的测试，应写前者，后者图片呈现不出来。这个道理我现在已经明了了，这就是“相对路径”的好处：在同一站点中不同文件夹下的文档相互链接，都可以使用相对路径，此时可以省去当前文档与目标文档完整URL（即路径名）中的相同部分，只留下不同部分。在电脑上，我C页面的路径是“C:\Documents and Settings\R.Mitsunari\My Documents\3.6综合示例\Z1\Z2\C.html”，“湖光山色”图片的路径是“C:\Documents and Settings\R.Mitsunari\My Documents\3.6综合示例\Z1\Z2\Z3\湖光山色.jpg”，只要把两者相同部分的路径名去掉，斜杠方向一换，便得出src="Z3/湖光山色.jpg"了，这是相对当前文档（C页.html）的路径，如图1。

若要选“根相对路径”，则会弹出一个提示框（如图2、3）：

       还有一个问题也是关于路径的。A页面的路径是“C:\Documents and Settings\R.Mitsunari\My Documents\3.6综合示例\Z1\A.html”，C页面的路径是：“C:\Documents and Settings\R.Mitsunari\My Documents\3.6综合示例\Z1\Z2\C.html”，现在要从C页面插一个链接返回A页面，这个由里往外链接的路径该怎么写？
       在实际操作过程中，我写了好几种路径都不成立。比如写href="A页.html" ，这个显然不行，打开浏览器后无法显示，因为此时地址栏里的路径显示的是“C:\Documents and Settings\R.Mitsunari\My Documents\3.6综合示例\Z1\Z2\A页.html”，按“相对路径”的定义来理解就明白了，即浏览器默认了A页面与C页面同在Z2文件夹下，而事实上A页面与C页面不在同一文件夹内，故如此写有误。
       那写href="~/Z1/A页.html"成吗？（书上介绍说用“~”代表站点根文件夹），结果也不行。浏览器地址栏里显示的是：“C:\Documents and Settings\R.Mitsunari\My Documents\3.6综合示例\Z1\Z2\~\Z1\A页.html”，也就是说，这次它默认的是在Z2文件夹下我又相继嵌套进了“~”和“Z1”文件夹！这显然不符实际。如此看来，我越是把路径名写得完整，浏览器理解得越是离谱。
       我犯愁了，那这个链接路径该怎么写呢？于是乎我用Dreamweaver进行了常规的链接A页面的可视化操作，结果系统生成的路径源代码是：返A页 ！为什么会用“..”两个点号呢？（如图4）

       为了搞懂这两个点号的含义，我又在Z3文件夹下建了Z4文件夹，又分别在这两个文件夹下建了D.html和E.html两个页面，并在E页面中分别链接了A页面、C页面和D页面，然后再查看源代码的不同：（如图5）

返回A页

 A页面在Z1文件夹下，C页面在Z2文件夹下，D页面在Z3文件夹下，当前文档E页面在Z4文件夹下，文件夹是一层一层嵌套的，现在是由最里面的Z4文件夹向外一层一层链接。终于看懂了！“..”代表的就是当前文档与被链接文档之间所间隔的文件夹，用“/”隔开每个文件夹，有几个“..”或“/”符号，就表示间隔了几个文件夹，从左往右，按的是由里往外的顺序，原来如此啊~

逸勤才子 潇湘卧龙岗 http://blog.163.com/mitsunari_0606