HTML 网址与路径
实作 HTML 时，常常会用到许多的“网址”( 路径 )，路径包含了超链接的网址、图片网址、外部资源...等，此外，这些路径又分成绝对路径和相对路径，这篇教学会介绍 HTML 网址路径的观念与用法。
快速导览：
网址和路径的差异
撰写 HTML 或阅读 HTML 文件时，常常会看到“网址”或“路径”的字眼，两者虽然不同，但又有着极为相似的地方，简单的区分如下：
- 网址：开头为
http://或https://开头的一串位址，通常必须将网页放置于服务器才能出现网址，网址可以是具有 domain name ( 域名 ) 并符合网址命名规则的文字，或服务器所产生的 ip ( 类似 127.0.0.1 之类 )。- 路径：文件打开的路径，例如在文件夹 X 中打开的 A.html，其路径可能是“/X/A.html”，根据文件所在的目录，或呼叫该文件的位置，可以使用“绝对路径”或“相对路径”。
以下方的 HTML 为例，第一个连到 Google 的超链接的 href 为“网址”，第二个超链接则是使用“相对路径”的方式连接到位于 oxxo 文件夹内的 B.html，虽然第二个超链接使用相对路径打开，但实际上如果已经是一个具有网络名称的网站，会使用“https://域名/oxxo/B.html”的方式打开。
<a href="https://www.google.com">Google</a>
<br>
<a href="oxxo/B.html">page B</a>
绝对路径
在 HTML 的术语中，常常会听见“绝对路径”，绝对路径的意思表示这个路径“不会改变”( 除非来源改变 )，凡是任何在网域里的文件夹或文件，都会具有一个“网址”，不管任何链接或文件来源，只要是直接使用“网址”，就表示使用了“绝对路径”，下图呈现了一个简单的数据树状结构，结构中的文件和文件夹均对应到域名 https://www.test.tw 里的网址。
将上方的树状图改成 HTML，可以发现不论是 <a> 的 href 还是 <img> 的 src，都使用了“网址”作为其属性值，也因为是绝对路径的缘故，这个网页不管在何处打开，只要网络连线正常，都可以打开图片或是链接到正确的目标网页。
因为绝对路径不会改变的缘故，如果目标网址变动，则相关的链接也会一并失效。
<a href="https://www.test.tw">首頁</a>
<br>
<a href="https://www.test.tw/X/A.html">開啟 A.html</a>
<br>
<a href="https://www.test.tw/X/oxxo/B.html">開啟 B.html</a>
<br>
<img src="https://www.test.tw/X/oxxo/C.jpg">
相对路径
有别于绝对路径，相对路径使用的是“相对于文件所在位置”的路径，其用法有下面三种：
/开头：服务器根目录。../开头：上一层，每多一个../就是再往上一层。.开头：同一层 ( 通常不会写，只会直接写出文件名称 )。
如果将结构中的文件和文件夹都使用“根目录”作为相对路径，就会呈现如下图的结构。
将上方的树状图改成 HTML，可以发现链接与图片的来源都换成 / 开头的相对路径。
使用根目录
/的好处在于如果域名改变，也不会影响整体的链接架构 ( 如果文件都位于同一层，也可以考虑同层的相对路径 )。
<a href="/">首頁</a>
<br>
<a href="/X/A.html">開啟 A.html</a>
<br>
<a href="/X/oxxo/B.html">開啟 B.html</a>
<br>
<img src="/X/oxxo/C.jpg">
如果不使用根目录的做法，则会以“文件所在位置”进行相对路径的判断，例如下图是以 A.html 为主，其他文件相对于 A.html 的路径结构。
下图则是以 B.html 为主，其他文件相对于 B.html 的路径结构 ( ../ 开头表示上一层 )。
在某些特殊情况下，相对目录的做法会搭配 <base> 标签，进行“根目录重设”( <base> 标签放在 <head> 标签里面 )，以下方的 HTML 为例，执行后就可以将根目录改成 X，也因为根目录有了变化，只要所有的相对路径也就要跟着调整。
注意，
<base>标签不会影响“/”相对路径，只会影响“../”或“.”相对路径。
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
<base href="https://www.test.tw/X/">
</head>
<body>
<a href="/">首頁</a>
<br>
<a href="A.html" target="_blank">實際連結網址：https://www.test.tw/X/A.html</a>
<br>
<a href="oxxo/B.html">實際連結網址：https://www.test.tw/X/oxxo/B.html</a>
<br>
<img src="/oxxo/C.jpg">
</html>
小结
相对路径和绝对路径是设计网页时一定要会的基本观念，特别是当网页中链接很多时，如果一个不留心将链接设定错误，可能就无法显示，或网页就无法打开，透过这篇教学，应该就能掌握网址路径的重点了。
微信扫码关注
抖音扫码关注