html中的链接不添加http(协议相对 URL)

简介: 在HTML中,如果想引用图片,通常会使用类似以下的代码:<img src="https://www.fgba.net/static/image/common/logo.png" alt="富贵吧" />如果将以上代码改成这样,你觉得图片还能正常显示吗?<img src="//www.fgba.net/static/image/common/logo.png" alt="富贵吧" />实际上这是可行的,省略URL的协议声明,浏览器照样可以正常引用相应的资源,这项解决方案称为protocol-relative URL,暂且可译作 协议相对 URL。那这么写有什么好处呢?

在HTML中,如果想引用图片,通常会使用类似以下的URL:

https://www.fgba.net/static/image/common/logo.png

如果将以上URL改成这样,你觉得图片还能正常显示吗?

//www.fgba.net/static/image/common/logo.png

实际上这是可行的,省略URL的协议声明,浏览器照样可以正常引用相应的资源,这项解决方案称为protocol-relative URL,暂且可译作 协议相对 URL。那这么写有什么好处呢?

如果当前的页面是通过HTTPS协议来浏览的,那么网页中的资源也只能通过HTTPS协议来引用,否则IE浏览中就会出现"页面同时包含安全和非安全的项目"的警告信息:

1.png

如果使用协议相对 URL,无论你是使用HTTPS,还是HTTP访问页面,浏览器都会以与你相同的协议请求页面中的资源,避免弹出这样的警告信息,同时可以节省5字节的数据量,何乐而不为呢?维基百科也全面启用了这项技术,可以看看他们的网页源代码。

同样,只要涉及到链接,我们都可以使用协议相对 URL:

//www.fgba.net/static/js/forum.js
//www.fgba.net/data/cache/style_1_common.css
//www.fgba.net

我们也可以在css中使用协议相对 URL:

//www.fgba.net/static/image/common/logo.png

需要注意的是:在IE7 / IE8中,使用 或者 @import 来引用样式表时,会出现样式表文件被下载两次的情况。除了这点,协议相对 URL都是可以正常工作的。

参考资料
The protocol-relative URL
Why you need protocol-relative URLs now

目录
相关文章
|
7天前
|
前端开发 JavaScript 安全
深入解析 http 协议
HTTP(超文本传输协议)不仅用于传输文本,还支持图片、音频和视频等多种类型的数据。当前广泛使用的版本为 HTTP/1.1。HTTPS 可视为 HTTP 的安全增强版,主要区别在于添加了加密层。HTTP 请求和响应均遵循固定格式,包括请求行/状态行、请求/响应头、空行及消息主体。URL(统一资源定位符)用于标识网络上的资源,其格式包含协议、域名、路径等信息。此外,HTTP 报头提供了附加信息,帮助客户端和服务端更好地处理请求与响应。状态码则用于指示请求结果,如 200 表示成功,404 表示未找到,500 表示服务器内部错误等。
14 0
深入解析 http 协议
|
15天前
|
数据采集 JSON API
🎓Python网络请求新手指南:requests库带你轻松玩转HTTP协议
本文介绍Python网络编程中不可或缺的HTTP协议基础,并以requests库为例,详细讲解如何执行GET与POST请求、处理响应及自定义请求头等操作。通过简洁易懂的代码示例,帮助初学者快速掌握网络爬虫与API开发所需的关键技能。无论是安装配置还是会话管理,requests库均提供了强大而直观的接口,助力读者轻松应对各类网络编程任务。
59 3
|
16天前
|
机器学习/深度学习 JSON API
HTTP协议实战演练场:Python requests库助你成为网络数据抓取大师
在数据驱动的时代,网络数据抓取对于数据分析、机器学习等至关重要。HTTP协议作为互联网通信的基石,其重要性不言而喻。Python的`requests`库凭借简洁的API和强大的功能,成为网络数据抓取的利器。本文将通过实战演练展示如何使用`requests`库进行数据抓取,包括发送GET/POST请求、处理JSON响应及添加自定义请求头等。首先,请确保已安装`requests`库,可通过`pip install requests`进行安装。接下来,我们将逐一介绍如何利用`requests`库探索网络世界,助你成为数据抓取大师。在实践过程中,务必遵守相关法律法规和网站使用条款,做到技术与道德并重。
30 2
|
17天前
|
数据采集 存储 JSON
从零到一构建网络爬虫帝国:HTTP协议+Python requests库深度解析
在网络数据的海洋中,网络爬虫遵循HTTP协议,穿梭于互联网各处,收集宝贵信息。本文将从零开始,使用Python的requests库,深入解析HTTP协议,助你构建自己的网络爬虫帝国。首先介绍HTTP协议基础,包括请求与响应结构;然后详细介绍requests库的安装与使用,演示如何发送GET和POST请求并处理响应;最后概述爬虫构建流程及挑战,帮助你逐步掌握核心技术,畅游数据海洋。
48 3
|
23天前
|
数据采集 网络协议 API
HTTP协议大揭秘!Python requests库实战,让网络请求变得简单高效
【9月更文挑战第13天】在数字化时代,互联网成为信息传输的核心平台,HTTP协议作为基石,定义了客户端与服务器间的数据传输规则。直接处理HTTP请求复杂繁琐,但Python的`requests`库提供了一个简洁强大的接口,简化了这一过程。HTTP协议采用请求与响应模式,无状态且结构化设计,使其能灵活处理各种数据交换。
48 8
|
22天前
|
缓存 网络协议 UED
HTTP协议介绍
HTTP协议的
30 5
|
21天前
|
安全 网络安全 数据安全/隐私保护
HTTP与HTTPS协议区别及应用场景
在互联网高速发展的今天,HTTP与HTTPS作为数据传输的基石,作用至关重要。HTTP允许客户端与服务器间传输超文本文档,但其数据传输过程未加密,存在安全隐患;HTTPS则在此基础上加入了SSL/TLS协议,实现了数据加密传输,增强了安全性,广泛应用于电子商务、网上银行、政府网站及社交媒体平台等涉及敏感信息传输的领域,有效保护了用户隐私和数据安全。随着网络安全意识提升,HTTPS正逐渐成为主流。
|
22天前
|
缓存 开发者
HTTP协议
HTTP协议
35 2
|
8天前
|
JavaScript 网络协议 Windows
|
2月前
|
安全 Java Shell
【内网—内网转发】——http协议代理转发_reGeorg代理转发
【内网—内网转发】——http协议代理转发_reGeorg代理转发
20 3
下一篇
无影云桌面