前端基础之URL（2）

URL

Uniform Resource Locator，统一资源定位器，描述Internet上的一个资源的地址
例如：
https://www.jianshu.com/p/7157e41c8583
不仅限于网页，一个网页内的一张图片，也有它的URL
https://img.haomeiwen.com/i5493968/0dfb53a851438bdc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/816/format/webp

一个URL大致可以分为两部分(更多细节可参考http协议)，如上面所示的第一个URL
https://www.jianshu.com ：描述该资源在哪个服务器上
/p/7157e41c8583：描述该资源的相对路径

如自己在HBuilder里写的一个项目

目录

每一个对应的文件，都有它自己的URL，如:

http://127.0.0.1:8020/Test0110/index.html
http://127.0.0.1:8020/Test0110/p1.html
http://127.0.0.1:8020/Test0110/p2.html
http://127.0.0.1:8020/Test0110/img/itelitesicon.png

可见，Test0110目录下面的文件，都有一个对应的URL。但要注意的是：项目之外的文件，不对Internet公开。对外公开的，仅限于这个目录内的所有内容，包括文件，图片，程序等等。这个做网站的一个基本概念

相对路径

在访问 站内资源 的时候，应使用相对路径

目录

在index.html中

        <a href="p1.html" >新添声杨柳枝词二首</a><br />
        <a href="p2.html">定风波</a><br />
        <a href="pp/p3.html">itelites</a>

其中，
p1.html表示同级目录下的p1.html
pp/p3.html表示子目录pp下的p3.html

相对路径的更多写法

. 表示当前目录，如

<a href="./p2.html">
<a href="./img.itelitesicon.png">

.. 表示上级目录，如

<a href="../img/itelitesicon.png">
<a href="../img.index.html">

相对路径的解析

当点击一个超链接时，浏览器会对相对路径进行解析。

• 获取当前页面的URL
• 获取目标的相对路径，进行运算

例如：
当前页面：http://127.0.0.1:8020/Test0110/index.html
超链接： <a href="pp/p3.html">itelites</a>
计算过程：

1. 取得当前路径http://127.0.0.1:8020/Test0110/
2. 计算目标路径http://127.0.0.1:8020/Test0110/pp/p3.html

URL的错误写法

URL常见的错误写法有2种：

1. 写成了本地地址，例如<a href="D:\Demo\MyEclipse_1\free0601\WebRoot\Test0110">定风波</a>
   浏览器依然会显示超链接的标志，但点击没有响应效果
2. 本站资源不要带IP，例如<a href="http://127.0.0.1:8020/Test0110/pp/p3.html">itelites</a>
   如果这样写，我们可以发现点击超链接的确有反应，但是，为什么不要带IP？

• 在开发的时候，服务器地址不确定的，当项目放在其他服务器的时候，不应该还要重写每个<a>标签
• 在多人开发同一个WEB项目时，每个人的IP地址一般来说不一样

应该正确的使用URL，尽量都写成相对路径，请勿画蛇添足！！！