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

在HTML中,若是想引用图片,一般会使用相似如下的代码: css

<img src="http://www.ludou.org/logo.png" alt="" />
若是将以上代码改为这样,你以为图片还能正常显示吗?

<img src="//www.ludou.org/logo.png" alt="" />

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

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

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

     一样,只要涉及到连接,咱们均可以使用协议相对 URL: api

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<link rel="stylesheet" href="//www.ludou.org/style.css" />
<a href="//www.ludou.org/">Ludou</a>
 咱们也能够在css中使用协议相对 URL:

.logo { background: url(//www.ludou.org/logo.png); }
须要注意的是:在IE7 / IE8中,使用 <link> 或者 @import 来引用样式表时,会出现样式表文件被下载两次的状况。除了这点,协议相对 URL都是能够正常工做的。

参考资料
     The protocol-relative URL
     Why you need protocol-relative URLs *now* 浏览器

相关文章
相关标签/搜索