What's Hot

英雄榜:果尔网稿件征集启示

SEO优化案例分析 : 2013-11-23 14:25:27 - SEO资讯

你认可果尔网上的文章观点吗?你想把你心中的想法告诉大家吗?你愿意和果尔一起打造真正的纯SEO交流平台吗?……欢迎发送您的建议或意见,以及您的原创文章(请. ...

编写protocol-relative url协议相对URL有什么好处?

Posted:2013-11-22 13:20:39 - comments | 作者: @果尔 @ SEO培训学院 修订1.4 ID:6963

author

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

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

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

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

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

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

This Page Contains Both Secure and Non-Secure Items

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

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

1
2
3
 
<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:

1
 
.logo { background: url(//www.ludou.org/logo.png); }

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

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


果尔SEO,中国医疗美容机构SEO经验分享平台。本文头像LOGO署名文章版权所有,转载请注明出处。

更多

上一篇:如何快速看懂蜘蛛爬行日志代表的意思