Baidu, Taobao, Tencent three big giant HTML page specification decomposition

"Compatible HTML5 scheme"
Baidu Bar, Baidu picture realization


<!--[If Lt IE 9]>
<script>
(function () {
var tags = [' Header ', ' footer ', ' figure ', ' figcaption ', ' details ', ' summary ', ' hgroup ', ' nav ', ' aside '

, ' article ', ' section ', ' Mark ', ' abbr ', ' meter ', ' output ', ' progress ', ' time ', ' video ', ' Audio ', ' Canvas ', ' dialog '];
for (Var i=tags.length-1;i>-1;i--) {document.createelement (tags[i]);}
})();
</script>
<! [endif]-->
<style>
header,footer,section,article,aside,nav,figure{display:block;margin:0;padding:0;border:0;}
</style>




The realization of Tencent Isux Research Institute

<!--[If Lt IE 9]>
<script src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" ></script>
<! [endif]-->


Taobao-my Taobao page to achieve ditto, but is different versions

<!--[If Lt IE 9]>
<script src= "Http://g.tbcdn.cn//tb/mytaobao/12.12.15/common/??html5shiv-min.js" ></script>
<! [endif]-->


Have to mention a plug-in Https://github.com/aFarkas/html5shiv on the GitHub to reach the height of 3453 stars, has been widely recognized at home and abroad, if you are tired of the page full of Div want to embrace the HTML5 element as soon as possible, use it.

"Selection of compatibility Mode"
About compatibility mode
Baidu Home use is

<meta http-equiv=x-ua-compatible content=ie=emulateie7>


Baidu Search page is using the

<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >


Baidu Pictures, Tencent Isux Research Institute, Taobao collection page use is

<meta http-equiv= "x-ua-compatible" content= "Ie=edge"/>


X-ua-compatible This is a IE8 special tag that specifies IE8 browser to simulate the rendering of a particular version of IE browser

The effect of chrome=1 writing is to use GCF to render the page if GCF is installed, and to use the highest version of the IE kernel for rendering if GCF is not installed.

Baidu home So something he certainly does not care which mode to use, more to take care of the old browser; Search pages tend to be more willing to use chorme rendering when they are GCF.

Have to spit, domestic banks to pay when the compatibility support, so the third kind of common recognition seems to be understandable.

"Move First"

The realization of Tencent Isux Research Institute

<!--Mobile specific Metas
==================================================-->
<meta name= "viewport" content= "Width=device-width, initial-scale=1, Maximum-scale=1,user-scalable=no" >
<meta name= "apple-mobile-web-app-capable" content= "yes"/>


The realization of Taobao homepage

<meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name= "viewport"/>
<meta content= "yes" name= "apple-mobile-web-app-capable"/>


Here is not affixed to Baidu, does not mean that Baidu does not attach importance to this piece, but too much attention, 1.9 billion $ to buy 91 wireless plus Baidu app paste app music app Picture app ... It's all there.

"Recommended Upgrades"


<!--[If Lt IE 8]>
<div class= "G_tips" >
<p> has more than 90% users using a newer version of <a target= "_blank" title= "Download Chrome" href= "http://www.google.com/chrome/" >google chrome</a> or <a target= "_blank" href= "http://www.microsoft.com/zh-cn/download/ie.aspx?q=internet+explorer" ">internet explorer</a> experience a more exciting page, don't you try?" </p>
</div>
<! [endif]-->
<style>
. g_tips{background: #FFF691; color: #010101; text-align:center;height:40px;line-height:40px;font-family: ' STHeiti ', ' \5fae\8f6f\96c5\9ed1 '}.g_tips a{color: #676767;p adding:0 2px;zoom:1}
</style>



What, not even IE8? Can't tolerate Ah, suggest you change earlier!

"Reference stencil"


<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> page name </title>
<meta name= "keywords" content= ""/>
<meta name= "description" content= ""/>
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<!--Mobile specific Metas
==================================================-->
<meta name= "viewport" content= "Width=device-width, initial-scale=1, Maximum-scale=1,user-scalable=no" >
<meta name= "apple-mobile-web-app-capable" content= "yes"/>
<!--CSS
==================================================-->
<link rel= "shortcut icon" href= "Http://www.yunos.com/favicon.ico" >
<link rel= "stylesheet" href= "Http://m.alicdn.com/css/index.css"/>
<style>/* CSS */</style>

<body>
<!--[If Lt IE 8]>
<div class= "G_tips" >
<p>
More than 90% users have already used the newer version
<a target= "_blank" title= "Download Chrome" href= "http://www.google.com/chrome/" >google chrome</a>
Or
<a target= "_blank" href= "Http://www.microsoft.com/zh-cn/download/ie.aspx?q=internet+explorer" >internet Explorer</a>
To experience a smoother and more exciting page, don't you try?
</p>
</div>
<! [endif]-->


<script src= "Js/index.js" ></script>
<script>//JS
</script>
</body>





Typically, the CSS starts with the document and the script is at the end of the document. I don't want to explain too much.
If a page is simple enough to write on the page is completely OK, especially some simple topics, but the project should be used with caution


The page global variable name is followed by the PDC FP PageInfo window.g_config (function () {window. pdc={}) ();