你能写出正确的网址吗?

上一讲里我们一起学习了HTTP协议里的请求方法,其中最常用的一个是GET,它用来从服务器上某个资源获取数据,另一个是POST,向某个资源提交数据。

那么,应该用什么来标记服务器上的资源呢?怎么区分“这个”资源和“那个”资源呢?

经过前几讲的学习,你一定已经知道了,用的是URI,也就是统一资源标识符(Uniform Resource Identifier)。因为它经常出现在浏览器的地址栏里,所以俗称为“网络地址”,简称“网址”。

严格地说,URI不完全等同于网址,它包含有URL和URN两个部分,在HTTP世界里用的网址实际上是URL——统一资源定位符(Uniform Resource Locator)。但因为URL实在是太普及了,所以常常把这两者简单地视为相等。

不仅我们生活中的上网要用到URI,平常的开发、测试、运维的工作中也少不了它。

如果你在客户端做iOS、 Android或者某某小程序开发,免不了要连接远程服务,就会调用底层API用URI访问服务。

如果你使用Java、PHP做后台Web开发,也会调用getPath()、parse_url() 等函数来处理URI,解析里面的各个要素。

在测试、运维配置Apache、Nginx等Web服务器的时候也必须正确理解URI,分离静态资源与动态资源,或者设置规则实现网页的重定向跳转。

总之一句话,URI非常重要,要搞懂HTTP甚至网络应用,就必须搞懂URI。

URI的格式

不知道你平常上网的时候有没有关注过地址栏里的那一长串字符,有的比较简短,有的则一行都显示不下,有的意思大概能看明白,而有的则带着各种怪字符,有如“天书”。

其实只要你弄清楚了URI的格式,就能够轻易地“破解”这些难懂的“天书”了。

URI本质上是一个字符串,这个字符串的作用是唯一地标记资源的位置或者名字

这里我要提醒你注意,它不仅能够标记万维网的资源,也可以标记其他的,如邮件系统、本地文件系统等任意资源。而“资源”既可以是存在磁盘上的静态文本、页面数据,也可以是由Java、PHP提供的动态服务。

下面的这张图显示了URI最常用的形式,由scheme、host:port、path和query四个部分组成,但有的部分可以视情况省略。

在这里插入图片描述

URI的基本组成

URI第一个组成部分叫scheme,翻译成中文叫“方案名”或者“协议名”,表示资源应该使用哪种协议来访问。

最常见的当然就是“http”了,表示使用HTTP协议。另外还有“https”,表示使用经过加密、安全的HTTPS协议。此外还有其他不是很常见的scheme,例如ftp、ldap、file、news等。

浏览器或者你的应用程序看到URI里的scheme,就知道下一步该怎么走了,会调用相应的HTTP或者HTTPS下层API。显然,如果一个URI没有提供scheme,即使后面的地址再完善,也是无法处理的。

在scheme之后,必须是三个特定的字符“://”,它把scheme和后面的部分分离开。

实话实说,这个设计非常的怪异,我最早上网的时候看见地址栏里的“://”就觉得很别扭,直到现在也还是没有太适应。URI的创造者蒂姆·伯纳斯-李也曾经私下承认“://”并非必要,当初有些“过于草率”了。

不过这个设计已经有了三十年的历史,不管我们愿意不愿意,只能接受。

在“://”之后,是被称为“authority”的部分,表示资源所在的主机名,通常的形式是“host:port”,即主机名加端口号。

主机名可以是IP地址或者域名的形式,必须要有,否则浏览器就会找不到服务器。但端口号有时可以省略,浏览器等客户端会依据scheme使用默认的端口号,例如HTTP的默认端口号是80,HTTPS的默认端口号是443。

有了协议名和主机地址、端口号,再加上后面标记资源所在位置的path,浏览器就可以连接服务器访问资源了。

URI里path采用了类似文件系统“目录”“路径”的表示方式,因为早期互联网上的计算机多是UNIX系统,所以采用了UNIX的“/”风格。其实也比较好理解,它与scheme后面的“://”是一致的。

这里我也要再次提醒你注意,URI的path部分必须以“/”开始,也就是必须包含“/”,不要把“/”误认为属于前面authority。

说了这么多“理论”,来看几个实例。

  • http://nginx.org
  • http://www.chrono.com:8080/11-1
  • https://tools.ietf.org/html/rfc7230
  • file:///D:/http_study/www/

第一个URI算是最简单的了,协议名是“http”,主机名是“nginx.org”,端口号省略,所以是默认的80,而路径部分也被省略了,默认就是一个“/”,表示根目录。

第二个URI是在实验环境里这次课程的专用URI,主机名是“www.chrono.com”,端口号是8080,后面的路径是“/11-1”。

第三个是HTTP协议标准文档RFC7230的URI,主机名是“tools.ietf.org”,路径是“/html/rfc7230”。

最后一个URI要注意了,它的协议名不是“http”,而是“file”,表示这是本地文件,而后面居然有三个斜杠,这是怎么回事?

如果你刚才仔细听了scheme的介绍就能明白,这三个斜杠里的前两个属于URI特殊分隔符“://”,然后后面的“/D:/http_study/www/”是路径,而中间的主机名被“省略”了。这实际上是file类型URI的“特例”,它允许省略主机名,默认是本机localhost。

但对于HTTP或HTTPS这样的网络通信协议,主机名是绝对不能省略的。原因之前也说了,会导致浏览器无法找到服务器。

我们可以在实验环境里用Chrome浏览器再仔细观察一下HTTP报文里的URI。运行Chrome,用F12打开开发者工具,然后在地址栏里输入“http://www.chrono.com/11-1”,得到的结果如下图。

在这里插入图片描述

在开发者工具里依次选“Network”“Doc”,就可以找到请求的URI。然后在Headers页里看Request Headers,用“view source”就可以看到浏览器发的原始请求头了。

发现了什么特别的没有?

在HTTP报文里的URI“/11-1”与浏览器里输入的“http://www.chrono.com/11-1”有很大的不同,协议名和主机名都不见了,只剩下了后面的部分。

这是因为协议名和主机名已经分别出现在了请求行的版本号和请求头的Host字段里,没有必要再重复。当然,在请求行里使用完整的URI也是可以的,你可以在课后自己试一下。

通过这个小实验,我们还得到了一个结论:客户端和服务器看到的URI是不一样的。客户端看到的必须是完整的URI,使用特定的协议去连接特定的主机,而服务器看到的只是报文请求行里被删除了协议名和主机名的URI。

如果你配置过Nginx,你就应该明白了,Nginx作为一个Web服务器,它的location、rewrite等指令操作的URI其实指的是真正URI里的path和后续的部分。

URI的查询参数

使用“协议名+主机名+路径”的方式,已经可以精确定位网络上的任何资源了。但这还不够,很多时候我们还想在操作资源的时候附加一些额外的修饰参数。

举几个例子:获取商品图片,但想要一个32×32的缩略图版本;获取商品列表,但要按某种规则做分页和排序;跳转页面,但想要标记跳转前的原始页面。

仅用“协议名+主机名+路径”的方式是无法适应这些场景的,所以URI后面还有一个“query”部分,它在path之后,用一个“?”开始,但不包含“?”,表示对资源附加的额外要求。这是个很形象的符号,比“://”要好的多,很明显地表示了“查询”的含义。

查询参数query有一套自己的格式,是多个“key=value”的字符串,这些KV值用字符“&”连接,浏览器和服务器都可以按照这个格式把长串的查询参数解析成可理解的字典或关联数组形式。

你可以在实验环境里用Chrome试试下面这个加了query参数的URI:

http://www.chrono.com:8080/11-1?uid=1234&name=mario&referer=xxx
Chrome的开发者工具也能解码出query里的KV对,省得我们“人肉”分解。

还可以再拿一个实际的URI来看一下,这个URI是某电商网站的一个商品查询URI,比较复杂,但相信现在的你能够毫不费力地区分出里面的协议名、主机名、路径和查询参数。

https://search.jd.com/Search?keyword=openresty&enc=utf-8&qrst=1&rt=1&stop=1&vt=2&wq=openresty&psort=3&click=0

你也可以把这个URI输入到Chrome的地址栏里,再用开发者工具仔细检查它的组成部分。

URI的完整格式

讲完了query参数,URI就算完整了,HTTP协议里用到的URI绝大多数都是这种形式。

不过必须要说的是,URI还有一个“真正”的完整形态,如下图所示。

在这里插入图片描述

这个“真正”形态比基本形态多了两部分。

第一个多出的部分是协议名之后、主机名之前的身份信息“user:passwd@”,表示登录主机时的用户名和密码,但现在已经不推荐使用这种形式了(RFC7230),因为它把敏感信息以明文形式暴露出来,存在严重的安全隐患。

第二个多出的部分是查询参数后的片段标识符“#fragment”,它是URI所定位的资源内部的一个“锚点”或者说是“标签”,浏览器可以在获取资源后直接跳转到它指示的位置。

但片段标识符仅能由浏览器这样的客户端使用,服务器是看不到的。也就是说,浏览器永远不会把带“#fragment”的URI发送给服务器,服务器也永远不会用这种方式去处理资源的片段。

URI的编码

刚才我们看到了,在URI里只能使用ASCII码,但如果要在URI里使用英语以外的汉语、日语等其他语言该怎么办呢?

还有,某些特殊的URI,会在path、query里出现“@&?"等起界定符作用的字符,会导致URI解析错误,这时又该怎么办呢?

所以,URI引入了编码机制,对于ASCII码以外的字符集和特殊字符做一个特殊的操作,把它们转换成与URI语义不冲突的形式。这在RFC规范里称为“escape”和“unescape”,俗称“转义”。

URI转义的规则有点“简单粗暴”,直接把非ASCII码或特殊字符转换成十六进制字节值,然后前面再加上一个“%”。

例如,空格被转义成“%20”,“?”被转义成“%3F”。而中文、日文等则通常使用UTF-8编码后再转义,例如“银河”会被转义成“%E9%93%B6%E6%B2%B3”。

有了这个编码规则后,URI就更加完美了,可以支持任意的字符集用任何语言来标记资源。

不过我们在浏览器的地址栏里通常是不会看到这些转义后的“乱码”的,这实际上是浏览器一种“友好”表现,隐藏了URI编码后的“丑陋一面”,不信你可以试试下面的这个URI。

http://www.chrono.com:8080/11-1?夸父逐日
先在Chrome的地址栏里输入这个query里含有中文的URI,然后点击地址栏,把它再拷贝到其他的编辑器里,它就会“现出原形”:

http://www.chrono.com:8080/11-1?%E5%A4%B8%E7%88%B6%E9%80%90%E6%97%A5

小结

今天我们学习了网址也就是URI的知识,在这里小结一下今天的内容。

  1. URI是用来唯一标记服务器上资源的一个字符串,通常也称为URL;
  2. URI通常由scheme、host:port、path和query四个部分组成,有的可以省略;
  3. scheme叫“方案名”或者“协议名”,表示资源应该使用哪种协议来访问;
  4. “host:port”表示资源所在的主机名和端口号;
  5. path标记资源所在的位置;
  6. query表示对资源附加的额外要求;
  7. 在URI里对“@&/”等特殊字符和汉字必须要做编码,否则服务器收到HTTP报文后会无法正确处理。

课下作业

  1. HTTP协议允许在在请求行里使用完整的URI,但为什么浏览器没有这么做呢?
  • 节省带宽资源,协议里起始行和 host 已经包含了
  1. URI的查询参数和头字段很相似,都是key-value形式,都可以任意自定义,那么它们在使用时该如何区别呢?(具体分析可以在“答疑篇”第41讲中的URI查询参数和头字段部分查看)
  • 查询参数针对的待访问的资源,是稳定和长期的;头字段是某一次请求,是一次性的暂时的。
<think>好的,我现在需要帮助用户了解如何在文本中添加可点击的超链接。根据用户提供的引用和之前的对话,我需要综合这些信息来给出一个全面的回答。首先,用户的问题是如何在文本中创建可点击的网址超链接,而用户提供的引用涉及HTML、Markdown、Office文档、Python等多个方面,还有关于可访问性的建议。 首先,我需要回顾之前的回答,用户之前询问的是IP138网址超链接的实现方法,涉及HTML、Markdown、Office等不同场景。现在用户进一步想了解在文本中添加可点击超链接的一般方法,可能包括各种平台和编程语言。 接下来,查看用户提供的引用内容: 引用1提到HTML中使用<a>标签创建超链接,并给出了示例。这确认了在HTML中的基本方法,用户可能需要这部分内容,但需要更详细的说明,比如属性解释和示例代码。 引用2提到了创建链接时的最佳实践,比如避免使用URL作为链接文本,保持链接文本简洁,避免重复,以及处理非HTML资源。这些是关于可访问性和用户体验的重要提示,应该在回答中强调。 引用3讨论了在鸿蒙系统富文本组件中添加超链接的挑战,指出可能没有直接的点击事件支持。这可能意味着用户对移动应用或特定框架中的超链接实现感兴趣,但用户当前的问题更偏向于一般文本中的超链接,所以可能需要简要提到不同平台的特殊情况,但重点放在通用方法上。 引用4涉及在Python中打印带超链接的文本到Spyder控制台,这可能是一个比较特殊的需求,用户可能想知道如何在编程环境中生成可点击链接,比如在IDE或命令行中。但通常控制台不支持可点击的超链接,除非特定环境支持ANSI转义码或其他方式,这部分可能需要说明。 然后,用户的问题是如何在文本中创建可点击的超链接,需要覆盖不同环境和格式,如网页、文档、编程语言等。根据之前的回答,用户已经了解HTML、Markdown、Office等方法,可能需要扩展其他场景,比如纯文本中的URL自动识别,编程语言中的处理,以及可访问性建议。 我需要组织回答的结构,分不同场景说明,每个场景给出步骤和示例,同时引用用户提供的引用内容来支持建议。例如,在HTML部分引用引用1,在最佳实践部分引用引用2,在Python部分引用引用4,并提到鸿蒙系统的情况引用3。 同时,用户可能希望知道在不同情况下如何实现,比如普通文本、编程环境、移动应用等。需要确保回答全面,但不过于技术化,保持清晰易懂。此外,注意事项部分需要包含引用2提到的可访问性建议,比如链接文本的选择,避免使用“点击这里”等。 可能还需要补充一些用户未提到的场景,比如在社交媒体或即时通讯工具中,URL通常会自动转换为可点击链接,不需要特殊处理。或者在Markdown中,除了基本语法,还有其他技巧,比如标题链接等。 需要检查是否有遗漏的重要方法,比如在LaTeX中添加超链接,但用户的问题可能集中在电子文档和网页,所以可能不需要涉及LaTeX,除非用户特别提到。 最后,确保回答中的示例代码正确,并符合用户之前提到的系统级指令,比如使用$...$和$$...$$格式,但在这个问题中主要是代码块,所以需要正确使用反引号包裹代码示例。 总结回答结构: 1. 网页开发(HTML) 2. 文档编写(Markdown、Office) 3. 编程环境(Python控制台) 4. 纯文本中的自动识别 5. 特殊系统/框架(如鸿蒙) 6. 注意事项(可访问性、最佳实践) 每个部分给出具体方法和示例,引用相关引用内容,并在最后添加相关问题。</think>### 如何在文本中添加可点击的网址超链接? 在不同场景下创建可点击超链接的方法有所不同,以下是常见场景的实现方案及注意事项: --- #### 一、**网页开发(HTML)** 使用`<a>`标签创建超链接,这是最基础且通用的方式: ```html <a href="https://www.example.com" target="_blank">访问示例网站</a> ``` - **关键属性**: - `href`:指定目标网址(必须包含协议,如`https://`); - `target="_blank"`:在新标签页打开链接; - `title="描述"`:为链接添加悬停提示,提升可访问性[^1]。 - **示例效果**:[访问示例网站](https://www.example.com) --- #### 二、**文档编写** 1. **Markdown**: ```markdown [示例链接](https://www.example.com) ``` 渲染效果:[示例链接](https://www.example.com) 2. **Office文档(Word/Excel/PowerPoint)**: - 选中文本 → 右键“超链接” → 输入完整URL(如`https://www.example.com`)。 --- #### 三、**编程环境** 1. **Python控制台输出**: 部分IDE(如Jupyter Notebook)支持自动识别URL: ```python print("访问网站: https://www.example.com") ``` *注:传统命令行控制台通常不支持可点击超链接,但可通过ANSI转义码模拟(需环境支持)[^4]。* 2. **Python生成HTML**: 通过脚本动态生成带链接的文本: ```python url = "https://www.example.com" link_text = "点击访问" html_link = f'<a href="{url}">{link_text}</a>' print(html_link) # 输出到HTML文件 ``` --- #### 四、**纯文本环境** 在邮件、社交媒体(微信/QQ/微博)中,直接输入完整URL即可自动转换为可点击链接: ``` 欢迎访问我们的官网:https://www.example.com ``` *注:需确保URL包含`http://`或`https://`前缀。* --- #### 五、**特殊框架(如鸿蒙系统)** 若框架原生不支持超链接点击事件(如鸿蒙的`RichText`组件),可通过以下方式绕过: 1. 将文本渲染为HTML格式; 2. 结合手势监听或自定义组件模拟点击行为[^3]。 --- ### 注意事项(提升可用性与安全性) 1. **链接文本规范**: - 避免使用“点击这里”或裸URL,应使用描述性文本(如“查看文档”)[^2]; - 保持简洁(如“下载指南”优于“点击此处下载最新版本的用户指南”)。 2. **安全性**: - 始终使用`https://`协议防止数据篡改; - 避免短链服务(如`bit.ly`),直接使用原始域名[^2]。 3. **可访问性**: - 为视觉障碍用户添加`title`属性或ARIA标签; - 避免同一页面出现重复链接文本指向不同目标。 --- ### 测试与验证 1. **基础验证**:点击链接后是否能正确跳转; 2. **跨平台测试**:检查在移动端/PC端的显示效果; 3. **安全扫描**:使用工具(如VirusTotal)检测目标URL是否安全。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值