彻底弄清URI、URL、URN的关系

前言

我们在开发过程中会听到URI,这个和URL有什么区别呢?我们就来了解下其中的关系和区别。

我们先看一张图,大致了解其中的关系,再深入了解下:

1. 基本定义

1.1 URI

URI(Uniform Resource Identifier,统一资源标识符)是用于唯一标识互联网上资源的一个字符串。

URI通用格式:[scheme:][//authority][/path][?query][#fragment]

1.1.1 scheme:(协议)

  • 定义了使用哪种协议、哪种方式来访问资源。例如:
    • https:- 安全的超文本传输协议 (用于网站)
    • http:- 超文本传输协议
    • ftp:- 文件传输协议 (用于下载文件)
    • mailto:- 电子邮件协议 (用于打开邮件客户端)
    • file:- 访问本地计算机上的文件
    • data:- 直接在URI中嵌入数据(如Base64编码的图片)

1.1.2. //authority(授权部分)

指定了提供资源的主机(服务器)以及可能的访问凭证。表现为:[userinfo@]host[:port]

  • userinfo@ (用户信息):可选。格式为 用户名:密码@。(例: ftp://user:pass@example.com)
  • host (主机):​必需​ 。通常是域名 (如 www.example.com) 或 IP 地址 (如 192.168.1.1)。
  • [:port] (端口):可选。指定连接到服务器上的特定网络端口。每个协议都有默认端口(HTTP->80, HTTPS->443, FTP->21),如果使用默认端口则可以省略。

1.1.3. /path(路径)

用于定位服务器上的特定资源。类似于操作系统中的文件路径,它指定了资源在服务器上的位置。表现为:/,例如:

  • /images/logo.png
  • /products/category/phone/index.html
  • /api/v1/users

1.1.4. ?query(查询字符串)

提供额外的参数给服务器,通常用于筛选、搜索或定制返回的资源。表现以问号 ?开头。包含一个或多个 key=value对,多个键值对之间用 &符号分隔。例如:

  • ?page=2
  • ?category=electronics&sort=price&order=asc
  • ?q=search+keywords

1.1.5. #fragment(片段)

指向资源​​内部​ ​的一个次级部分或锚点。它不会发送到服务器,纯粹用于客户端(浏览器)的页面内导航。表现为:以井号 #开头,如前端的锚点使用。例如:

  • #chapter1(跳转到HTML页面中id为chapter1的元素位置)
  • #top(跳转到页面顶部)
  • #disqus_thread(跳转到评论区)

因为URI它是一个广义概念,主要包含了两种表现形式:URL和URN。接下来了解下这两种。

1.2 URL

URL(Uniform Resource Locator,统一资源定位符)是我们最熟悉的概念,它不仅标识资源,还提供了定位和访问该资源的方法。

1.2.1 通用格式

URL通用格式:[scheme:][domain][port][/path][?query][#anchor]

协议://主机名:端口/路径?查询参数#片段

  • https://:协议(Scheme),表示使用HTTPS协议进行访问。
  • www.example.com:主机名(Host),表示资源所在的服务器域名。
  • :443:端口(Port),HTTPS默认端口是443,通常省略不写。
  • /products/index.html:路径(Path),表示资源在服务器上的具体位置。
  • ?category=electronics&page=2:查询参数(Query),提供给服务器的额外参数,用于筛选或搜索。
  • #anchor:片段(Fragment),指向资源内部的某个锚点或部分。

1.2.2 案例说明

通俗案例讲解:例如你要寄一个快递

  • [scheme:] = ​使用什么交通工具?​ (例如:航空邮件、EMS快递、平邮)
  • [domain] = ​收件人地址​ (包括:国家、城市、街道、门牌号)
  • [/path] = ​收件人具体是谁?​ (例如:张三 收, 或 财务部 收)
  • [?query] = ​额外的具体要求​ (例如:请前台代收, 请放在信箱里)
  • [#anchor] = ​快递内的某个部分​ (例如:一封信中请看第二页第三段)

实际案例解析:使用一个复杂的URL说明

https://admin:secret@www.shop.com:8080/products/index.html?category=14&color=red#reviews

部分 解释
scheme https: 使用HTTPS安全协议
domain //admin:secret@www.shop.com:8080 用户admin用密码secret登录到主机www.shop.com8080端口
path /products/index.html 服务器上products目录下的index.html文件
query ?category=14&color=red 给服务器的参数: category id是14,颜色是红色
anchor #reviews 加载页面后,直接滚动到"用户评论"部分

1.2.3 URL的缺点

URL是和​​地址相关​​。如果资源被移动到了另一个服务器(地址变了),原来的URL就会失效(返回404错误)。那么有没有办法地址不变,尽管资源移动,通过不变的地址也可以定位到对应的资源呢?

答案是:URN,接下来我们看一下URN。

1.3 URN

URN(Uniform Resource Name,统一资源命名符)专注于为资源提供持久且位置无关的唯一名称。

他的作用​ ​就是:​​为资源提供一个全局唯一、持久且与位置无关的名称​​。如何实现的呢?就是确保给资源一个"永久"的身份证号,无论这个资源被移动到哪个服务器上,它的名字(URN)都不会改变。它只回答一个问题:"这个资源是谁?",并且保证这个名字是唯一的和永久的。

1.3.1 通用格式

URN通用格式:[scheme:][namespace][namespace specific string]

表现为:urn:<命名空间>:<命名空间特定字符串>

1.3.2 案例

例如:urn:isbn:9780141036144(标识西游记这本书)

  • urn::固定的前缀,表明这是一个URN。
  • isbn :命名空间(Namespace),指定了后续字符串的格式和解析规则。例如,isbn表示国际标准书号。
  • 9780141036144:命名空间特定字符串,在该命名空间内唯一标识某个资源。

1.3.3 如何使用

因为​​URN是和名称相关,位置无关​ ​。名称是永久的,就需要额外的系统将其解析为当前的访问地址。就像图书管理系统,每本书有特定的编号,是需要额外的系统进行解析,才能使用。

所以要通过一URN解析服务将这个永久的名称(URN)转换为当前可用的地址(URL)来访问资源。就像一个永久身份证号(URN)可以通过户籍系统(解析服务)查到你的当前住址(URL)一样。

2. 三者的关系

总结对比表

特性 URI URL URN
​全称​ 统一资源​​标识符​ 统一资源​​定位符​ 统一资源​​名称​
​核心作用​ ​标识​​资源(我是谁?) ​定位​​并访问资源(我在哪?怎么找我?) ​命名​​资源(我的永久名字是什么?)
​包含信息​ 可能包含访问方式 ​总是包含​​访问协议和位置信息 ​不包含​​访问方式和位置信息
​持久性​ 依赖具体类型 ​不稳定​​,资源移动则失效 ​稳定持久​​,与位置无关
​例子​ https://..., mailto:..., urn:isbn:... https://www.example.com/page.html urn:isbn:9780141036144
​类比​ ​身份证​ ​住址​ ​身份证号码​

3. 总结

最后总结一下,URI是一种概念,具体表现形式是URLURN。而URL会因为资源的变化而失效,所以需要一种唯一的地址标识资源,不会因为资源的转移而失效,这就引出了URNURN需要特定的系统解析,比较麻烦。所以我们常用的都是URL

如有错误,请指正O^O!

相关推荐
暖木生晖8 分钟前
引入资源即针对于不同的屏幕尺寸,调用不同的css文件
前端·css·媒体查询
袁煦丞41 分钟前
DS file文件管家远程自由:cpolar内网穿透实验室第492个成功挑战
前端·程序员·远程工作
用户0137412843742 分钟前
九个鲜为人知却极具威力的 CSS 功能:提升前端开发体验的隐藏技巧
前端
永远不打烊1 小时前
Window环境 WebRTC demo 运行
前端
风舞1 小时前
一文搞定JS所有类型判断最佳实践
前端·javascript
coding随想1 小时前
哈希值变化的魔法:深入解析HTML5 hashchange事件的奥秘与实战
前端
一树山茶1 小时前
uniapp在微信小程序中实现 SSE进行通信
前端·javascript
coding随想1 小时前
小程序中的pageshow与pagehide事件,HTML5中也有?揭秘浏览器往返缓存(BFCache)
前端
萌萌哒草头将军1 小时前
Rspack 1.5 版本更新速览!🚀🚀🚀
前端·javascript·vue.js
阿卡不卡1 小时前
基于多场景的通用单位转换功能实现
前端·javascript