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

目录
相关文章
|
20天前
|
数据采集 存储 JSON
从零到一构建网络爬虫帝国:HTTP协议+Python requests库深度解析
【7月更文挑战第31天】在网络数据的海洋中,使用Python的`requests`库构建网络爬虫就像探索未知的航船。HTTP协议指导爬虫与服务器交流,收集信息。HTTP请求包括请求行、头和体,响应则含状态行、头和体。`requests`简化了发送各种HTTP请求的过程。
47 4
|
1天前
|
存储 网络协议 安全
HTTP协议和运行原理
HTTP协议和运行原理
|
15天前
|
域名解析 缓存 网络协议
揭秘DNS协议:从'http://www.example.com'到IP地址的奇幻旅程,你不可不知的互联网幕后英雄!
【8月更文挑战第4天】在互联网的广袤空间里,每台设备都有唯一的IP地址,但记忆这些数字组合并不直观。因此,DNS(域名系统)作为关键桥梁出现,将易记的域名转换为IP地址。DNS协议工作于应用层,支持用户通过域名访问资源。DNS系统包含多级服务器,从根服务器到权威服务器,共同完成域名解析。查询过程始于客户端,经过递归或迭代查询,最终由权威服务器返回IP地址,使浏览器能加载目标网页。
46 12
|
8天前
|
安全 算法 网络协议
【在Linux世界中追寻伟大的One Piece】HTTPS协议原理
【在Linux世界中追寻伟大的One Piece】HTTPS协议原理
23 2
|
11天前
|
网络协议
Web基础与HTTP协议
【8月更文挑战第10天】
23 2
|
11天前
|
API 开发者 微服务
RPC和 HTTP协议
【8月更文挑战第8天】RPC(远程过程调用)使程序能像本地调用般请求远程服务,简化网络通信细节。其优点包括高效的数据传输及严格的类型定义,适合微服务间的高效通信。HTTP(超文本传输协议)则是用于万维网数据传输的通用协议,以文本为基础,易于理解和调试,并被广泛支持。两者各有侧重,RPC偏高速服务通信,HTTP则更适用于多样化的网络场景。选择时需根据具体需求决定。
|
20天前
|
缓存 网络协议 算法
(二)Java网络编程之爆肝HTTP、HTTPS、TLS协议及对称与非对称加密原理!
作为一名程序员,尤其是Java程序员,那必须得了解并掌握HTTP/HTTPS相关知识。因为在如今计算机网络通信中,HTTP协议的作用功不可没,无论是日常上网追剧、冲���、亦或是接口开发、调用等,必然存在HTTP的“影子”在内。尤其对于WEB开发者而言,HTTP几乎是每天会打交道的东西。
45 10
|
21天前
|
数据采集 JSON API
HTTP协议实战演练场:Python requests库助你成为网络数据抓取大师
【7月更文挑战第30天】在网络数据抓取中,Python的`requests`库凭借其简洁的API和强大功能脱颖而出。首先确保已通过`pip install requests`安装库。实战演练包括:发送GET请求获取数据(如`requests.get(url)`),处理JSON响应(利用`.json()`方法解析),添加请求头以绕过反爬虫机制(如设置`User-Agent`),以及发送POST请求提交数据。掌握这些技能的同时,务必遵守法律法规和网站政策。
41 6
|
21天前
|
数据采集 网络协议 API