路径这里单独开一个文件，主要是路径用途非常广泛，不论是现在的 a 元素，还是后面的图片多媒体这些，路径的写法都是统一的。

站内资源和站外资源

站内资源：当前网站的资源

站外资源：不是当前网站的资源

绝对路径

绝对路径：绝对的路径地址

相对路径：相对于当前文件的路径地址

一般来说，对站内资源多使用相对路径，站外资源则只能使用绝对路径。严格意义来说，站内资源其实也可以使用相对路径。

绝对路径的书写：协议名://主机名:端口号/路径

• 协议名：常见的有 http, https 这类
• 主机名：有可能是域名，也可以是 IP
• 端口号：大多数时候都可以不写，http 的默认端口号是 80，如果是 https，默认端口号是 443
• 路径：一个文件有很多资源，读者可以暂时把网站理解为文件夹，你打开这个域名打开的就是根目录，而这个根目录下可能有很多文件夹，有很多文件，你要访问这些根目录下的其他资源就需要靠路径。当然这里理解并不准确，在学习初期可以这样理解。

这里有一些知识涉及到计算机网络，并且是一个独立的知识板块，所以如果很多概念理解不了也不会影响后面的学习

以上知识只是一个路径的科普，我相信哪怕不学这些知识读者也应该，这里我们举个例子

假设我要跳转到百度

<a href="https://www.baidu.com"></a>

这里一定要注意，这里协议是一定不能省略的，也就是 https:// 这个东西，我们在浏览器里想访问百度只需要输入 www.baidu.com 或者甚至直接写 baidu.com 都可以，但是 a 元素不行，如果省略了协议，写成 www.baidu.com 是一定打不开的，在任何时候，我们访问网址都要输入协议，在浏览器里我们不用输入协议是因为浏览器默认帮我们输入了，这一点一定要注意。

那这里又抛出一个疑问，为什么省略了协议就无法访问了呢，为什么 a 元素不自动补全协议呢，因为省略协议的含义变了，省略协议之后这就变成了一个相对路径，我们看以下 a 元素

<a href="path.html"></a>

如果是这么写，那这个 a 元素就会打开这个 a 标签所在文件夹下的 path. html 文件，而如果我们当前文件所在的文件夹是 C:\test，点开这个标签，就会打开 C:\test\path.html 这个文件，但如果我写成如下形式

<a href="www.baidu.com"></a>

那这个标签点击后就会打开 C:\test\www.baidu.com 这个文件，如果你这里真的有这么一个叫做 www.baidu.com 的文件，那肯定能给他打开，但如果没有就直接报错，发现了吗，如果不加协议，其实就是相对路径，就是在当前路径后面去追加，但如果加上了 https://，点击的时候检测到了有协议，浏览器就知道这是一个绝对路径，就不会基于当前路径去访问。

这里补充一个知识点，如果当前协议和目标协议是一致的，那协议其实是可以省略的，什么意思呢，比如我这个网站打开的协议是 https，我要访问百度，百度的协议也是 https，我就可以写成 //www.baidu.com，发现了吗，虽然可以省略协议，但是也可以省略 https:，只保留两个斜杠，如果检测到了两个斜杠，浏览器就会自动使用当前页面的协议。我相信读者应该不会喜欢用这种方式写路径，当时有时候遇到了这种方式的路径知道他是什么意思就可以。

相对路径

相对路是重点，在上面已经介绍过相对路径的基本概念，相对路径其实就是相对于我们当前的路径去拼接，一般当前网站自己的资源就用相对路径。

相对路径的书写方式：以 ./ 开头，表示当前资源所在目录，如果我要访问某个文件，就写上某个文件名和后缀即可，如果我要访问某个目录下的文件，我就要先写上 目录名/，之后再去这个目录下找。其中 ../ 比较特殊，表示返回上级目录。

例如我有这样一个 a 元素

<a href="./test1/test2/test3/../test4.html"></a>

假设我当前目录，也就是这个 a 元素所在的文件是在 C:\test 这个目录下，那我这里访问的就应该是 C:\test\test1\test2\test4.html 这个文件，如果能看懂这个路径的方式，那这里也掌握的差不多了。

由于相对路径一定是以 ./ 开头，其实 ./ 本身是可以省略的