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

目录
相关文章
|
2月前
|
安全 网络协议 Linux
Linux网络应用层协议展示:HTTP与HTTPS
此外,必须注意,从HTTP迁移到HTTPS是一项重要且必要的任务,因为这不仅关乎用户信息的安全,也有利于你的网站评级和粉丝的信心。在网络世界中,信息的安全就是一切,选择HTTPS,让您的网站更加安全,使您的用户满意,也使您感到满意。
86 18
|
2月前
|
网络安全 开发者
如何解决HTTPS协议在WordPress升级后对网站不兼容的问题
以上就是解决WordPress升级后HTTPS协议对网站的不兼容问题的方法。希望能把这个棘手的问题看成是学校的管理问题一样来应对,将复杂的技术问题变得更加有趣和形象,并寻觅出解决问题的方式。希望你的网站能在新的学期得到更好的发展!
76 19
|
2月前
|
JSON 安全 网络协议
HTTP/HTTPS协议(请求响应模型、状态码)
本文简要介绍了HTTP与HTTPS协议的基础知识。HTTP是一种无状态的超文本传输协议,基于TCP/IP,常用80端口,通过请求-响应模型实现客户端与服务器间的通信;HTTPS为HTTP的安全版本,基于SSL/TLS加密技术,使用443端口,确保数据传输的安全性。文中还详细描述了HTTP请求方法(如GET、POST)、请求与响应头字段、状态码分类及意义,并对比了两者在请求-响应模型中的安全性差异。
248 20
|
2月前
|
安全 网络协议 算法
HTTP/HTTPS与SOCKS5协议在隧道代理中的兼容性设计解析
本文系统探讨了构建企业级双协议隧道代理系统的挑战与实现。首先对比HTTP/HTTPS和SOCKS5协议特性,分析其在工作模型、连接管理和加密方式上的差异。接着提出兼容性架构设计,包括双协议接入层与统一隧道内核,通过协议识别模块和分层设计实现高效转换。关键技术部分深入解析协议转换引擎、连接管理策略及加密传输方案,并从性能优化、安全增强到典型应用场景全面展开。最后指出未来发展趋势将更高效、安全与智能。
92 1
|
3月前
|
安全 网络安全 数据安全/隐私保护
HTTP 与 HTTPS 协议及 SSL 证书解析-http和https到底有什么区别?-优雅草卓伊凡
HTTP 与 HTTPS 协议及 SSL 证书解析-http和https到底有什么区别?-优雅草卓伊凡
192 3
|
5月前
|
网络协议 安全 网络安全
HTTP与HTTPS协议入门
HTTP协议是互联网的基石,HTTPS则是其安全版本。HTTP基于TCP/IP协议,属于应用层协议,不涉及数据包传输细节,主要规定客户端与服务器的通信格式,默认端口为80。
144 25
HTTP与HTTPS协议入门
|
4月前
|
API Kotlin
动态URL构建与HTTP请求的Kotlin实现
动态URL构建与HTTP请求的Kotlin实现
|
7月前
|
网络协议 安全 网络安全
探索网络模型与协议:从OSI到HTTPs的原理解析
OSI七层网络模型和TCP/IP四层模型是理解和设计计算机网络的框架。OSI模型包括物理层、数据链路层、网络层、传输层、会话层、表示层和应用层,而TCP/IP模型则简化为链路层、网络层、传输层和 HTTPS协议基于HTTP并通过TLS/SSL加密数据,确保安全传输。其连接过程涉及TCP三次握手、SSL证书验证、对称密钥交换等步骤,以保障通信的安全性和完整性。数字信封技术使用非对称加密和数字证书确保数据的机密性和身份认证。 浏览器通过Https访问网站的过程包括输入网址、DNS解析、建立TCP连接、发送HTTPS请求、接收响应、验证证书和解析网页内容等步骤,确保用户与服务器之间的安全通信。
420 3
|
8月前
|
安全 搜索推荐 网络安全
HTTPS协议是**一种通过计算机网络进行安全通信的传输协议
HTTPS协议是**一种通过计算机网络进行安全通信的传输协议
182 11
|
8月前
|
缓存 安全 网络协议
HTTPS协议的历史发展
HTTPS协议的历史发展
288 8

热门文章

最新文章