编程小贴士

给你的编程提供小点子


百度,淘宝,腾讯三大巨头HTML页面规范分解

当前位置:首页 > 产品 > 网页设计 > 正文
百度,淘宝,腾讯三大巨头HTML页面规范分解
浏览次数:78次 前端开发网(W3Cfuns.com) 2015年02月05日 字号: 大 中 小
分享到: QQ空间 新浪微博 腾讯微博 人人网 豆瓣网 开心网 更多 0

【兼容html5方案】
百度贴吧,百度图片的实现

<!–[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>

复制代码

腾讯isux研究院的实现

<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

复制代码

淘宝- 我的淘宝页实现同上,只不过是不同版本

<!– [if lt IE 9]>
<script src=”http://g.tbcdn.cn//tb/mytaobao/12.12.15/common/??html5shiv-min.js”></script>
<![endif]–>

复制代码

不得不提的一个插件 https://github.com/aFarkas/html5shiv 在github 上达到了3453 星的高度,获得了国内外的广泛认可,如果你厌烦了满页面的div 想尽早拥抱html5 元素,就使用它吧。

【兼容模式的选择】
关于兼容模式
百度首页使用的是

<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>

复制代码

百度搜索页使用的是

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>

复制代码

百度图片,腾讯isux研究院,淘宝收藏页使用的是

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”/>

复制代码

X-UA-Compatible 这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式
chrome=1写法可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果未安装GCF,则使用最高版本的IE内核进行渲染。

百度首页那么点东西他当然不在乎用哪种模式,更多地去照顾老式浏览器; 搜索页倾向于速度有GCF的时候更愿意使用chorme渲染。

不得不吐槽,国内各的银行支付时的兼容支持,由此第三种得到大家的共同认可似乎也无可厚非。

【移动至上】

腾讯isux研究院的实现

<!– 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” />

复制代码

淘宝主页的实现

<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” />

复制代码

这里没贴百度的,不代表百度不重视这一块,反而太重视了,19亿$买了91无线 再加上 百度App 贴吧App 音乐App 图片APP … 全有了。

【建议升级】

<!–[if lt IE 8]>
<div class=”g_tips”>
<p>已经有超过90%的用户使用更高版本 <a target=”_blank” title=”下载Chrome” href=”http://www.google.com/chrome/”>Google Chrome</a> 或 <a target=”_blank” href=”http://www.microsoft.com/zh-cn/download/ie.aspx?q=internet+explorer”>Internet Explorer</a> 体验到了更精彩的页面,你还不试试?</p>
</div>
<![endif]–>
<style>
.g_tips{background:#FFF691;color:#010101;text-align:center;height:40px;line-height:40px;font-family:’STHeiti’,’5fae8f6f96c59ed1′}.g_tips a{color:#676767;padding:0 2px;zoom:1}
</style>

复制代码

什么,连ie8都不是? 无法容忍啊,建议你早点换吧!

【参考模版】

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”UTF-8″>
<title>页面名称</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>
</head>

<body>
<!–[if lt IE 8]>
<div class=”g_tips”>
<p>
已经有超过90%的用户使用更高版本
<a target=”_blank” title=”下载Chrome” href=”http://www.google.com/chrome/”>Google Chrome</a>

<a target=”_blank” href=”http://www.microsoft.com/zh-cn/download/ie.aspx?q=internet+explorer”>Internet Explorer</a>
体验到了更流畅更精彩的页面,你还不试试?
</p>
</div>
<![endif]–>

<h1>300,000,00</h1>

<script src=”js/index.js”></script>
<script>// js
</script>
</body>
</html>

复制代码

<html lang=”zh-CN”> 性属说明这个html内容是以中文为显示和阅读基础,多语言的网站建议添加。
通常情况下CSS放文档开始,脚本放在文档末尾我想不用解释太多
如果一个页面足够简单,写在页面上是完全 OK 的,特别是一些简单的专题,但是项目上需谨慎使用

页面全局变量命名随记 PDC FP PageInfo window.g_config (function(){window.PDC={}})();

【CDN加速】【dataUrl】【css spirte】【按需加载和loader机制】【压缩检查发布】
作为一个前端开发,这些你做了吗?

185 Responses to “ 百度,淘宝,腾讯三大巨头HTML页面规范分解 ”

  1. best pron说道:

    nNhJhM Wow, this piece of writing is good, my sister is analyzing these things, so I am going to convey her.

  2. Really enjoyed this article.Thanks Again. Cool.

  3. Mantra Yoga说道:

    This is one awesome blog.Really looking forward to read more. Really Cool.

  4. Mantra Yoga说道:

    Really enjoyed this article post.Really looking forward to read more. Really Cool.

  5. The website loading speed is incredible. It seems that you are doing any distinctive trick.

  6. noi nau sua说道:

    Terrific work! This is the type of info that are meant to be shared across the net. Shame on Google for now not positioning this publish higher! Come on over and discuss with my website. Thanks =)

  7. colors for kids说道:

    There as certainly a great deal to know about this topic. I love all of the points you made.

  8. Lung Detox说道:

    Very nice post. I just stumbled upon your blog and wanted to say that I ave truly enjoyed surfing around your blog posts. In any case I all be subscribing to your feed and I hope you write again soon!

  9. Muchos Gracias for your article post.Thanks Again. Great.

  10. Muchos Gracias for your article post. Really Great.

  11. My Face Gifts说道:

    The loans may also be given at very strict terms as well as any violations will attract huge penalties super real property tax

  12. I truly appreciate this blog post.Much thanks again. Want more. here

  13. Oluwadamilare说道:

    Wow! This could be one particular of the most helpful blogs We have ever arrive across on this subject. Basically Great. I am also an expert in this topic so I can understand your effort.

  14. visit website说道:

    Link exchange is nothing else but it is simply placing the other person as web site link on your page at suitable place and other person will also do same for you.

  15. hamptonbay说道:

    uk payday loans Along with hard work and strong will, poor people can find motivation and motivation to succeed in their very own business venture

  16. Thanks for the article.Thanks Again. Really Great.

  17. This blog is without a doubt awesome and diverting. I have picked a lot of handy stuff out of this blog. I ad love to come back again soon. Cheers!

  18. visit说道:

    You need to participate in a contest for top-of-the-line blogs on the web. I will suggest this web site!

  19. w88world.com说道:

    site-building people, due to it as nice content

  20. I truly appreciate this post. I ave been looking all over for this! Thank goodness I found it on Bing. You have made my day! Thank you again!

  21. click here说道:

    your intelligence on just posting videos to your site when you

  22. woking cab说道:

    Ridiculous quest there. What happened after? Thanks!

  23. I required to thank you for this interesting We definitely loved each tiny tad of it. I have you bookmarked your identifiable web place to ensure outdated the newest things a person publish.

  24. Ep coc ly tam说道:

    uniform apparel survive year. This style flatters

  25. Hoa Tuoi Van Nam说道:

    You can certainly see your expertise in the paintings you write. The sector hopes for more passionate writers like you who are not afraid to mention how they believe. At all times follow your heart.

  26. I think this is a real great blog article.Thanks Again. Will read on

  27. Thank you ever so for you article.Really thank you! Really Great.

  28. to read more说道:

    I truly appreciate this post. I ave been looking all over for this! Thank goodness I found it on Bing. You have made my day! Thx again..

  29. for details说道:

    Thanks again for the post.Really thank you! Great.

  30. Only wanna say that this is handy , Thanks for taking your time to write this.

  31. There as noticeably a bundle to find out about this. I assume you made certain nice factors in features also.

  32. PERM说道:

    You could definitely see your skills in the paintings you write. The world hopes for more passionate writers such as you who aren at afraid to mention how they believe. All the time follow your heart.

  33. lanyard supplier说道:

    Thank you, I ave recently been looking for info about this subject for ages and yours is the greatest I ave discovered till now. But, what about the bottom line? Are you sure about the source?

  34. This awesome blog is no doubt educating and also factual. I have picked a bunch of interesting tips out of it. I ad love to visit it again soon. Thanks a bunch!

  35. Nwokolo Collins说道:

    Way cool! Some extremely valid points! I appreciate you writing this write-up plus the rest of the website is very good.

  36. This is very interesting, You are a very skilled blogger. I ave joined your rss feed and look forward to seeking more of your magnificent post. Also, I have shared your web site in my social networks!

  37. click here说道:

    You have noted very interesting points ! ps decent site. What a grand thing, to be loved What a grander thing still, to love by Victor Hugo.

  38. Nwokolo说道:

    It is actually a strain within the players, the supporters and within the management considering we arrived in.

  39. You must take part in a contest for among the best blogs on the web. I will recommend this web site!

  40. klm voucher说道:

    I truly appreciate this blog post.Really looking forward to read more. Great.

  41. It as hard to come by knowledgeable people about this topic, however, you sound like you know what you are talking about! Thanks

  42. That is very fascinating, You are a very professional blogger. I ave joined your rss feed and sit up for searching for more of your great post. Also, I have shared your web site in my social networks

  43. Very good article. I am facing some of these issues as well..

  44. budget dumpster说道:

    I think you have observed some very interesting points, regards for the post.

  45. truyen ngon tinh说道:

    The account aided me a acceptable deal. I had been a

  46. You ave made some really good points there. I looked on the internet to find out more about the issue and found most individuals will go along with your views on this web site.

  47. tell popeyes说道:

    We stumbled over here by a different page and thought I should check things out. I like what I see so now i am following you. Look forward to going over your web page for a second time.

  48. thiet ke web说道:

    Really informative post.Much thanks again. Awesome.

  49. Link exchange is nothing else but it is just placing the other person as blog link on your page at appropriate place and other person will also do similar for you.

  50. Very good info. Lucky me I came across your website by accident (stumbleupon). I have book-marked it for later!

  51. This is one awesome article. Really Cool.

  52. Woah! I am really digging the template/theme of this site. It as simple, yet effective.

  53. I was excited to find this site. I need to to thank you for your time for this fantastic read!! I definitely loved every part of it and i also have you book marked to see new stuff in your site.

  54. You ave made some good points there. I looked on the web to learn more about the issue and found most individuals will go along with your views on this site.

  55. There is obviously a lot to realize about this. I assume you made various good points in features also.

  56. You made some good points there. I did a search on the topic and found most people will go along with with your blog.

  57. This very blog is definitely entertaining additionally informative. I have picked a lot of interesting tips out of this source. I ad love to visit it again soon. Thanks!

  58. Major thankies for the post.Thanks Again. Will read on

  59. Pretty nice post. I just stumbled upon your blog and wanted to say that I ave truly enjoyed browsing your blog posts. After all I will be subscribing to your feed and I hope you write again very soon!

  60. Georgia说道:

    It as really a great and helpful piece of information. I am glad that you shared this useful information with us. Please keep us up to date like this. Thank you for sharing.

  61. There is evidently a bundle to realize about this. I assume you made certain good points in features also.

  62. diets说道:

    pretty useful stuff, overall I feel this is really worth a bookmark, thanks

  63. Crochet poncho说道:

    There is clearly a lot to know about this. I suppose you made various good points in features also.

  64. Crochet poncho说道:

    We stumbled over here from a different web address and thought I might check things out. I like what I see so i am just following you. Look forward to looking over your web page repeatedly.

  65. online说道:

    Thanks so much for the blog article.Much thanks again. Awesome.

  66. white shoes说道:

    Its hard to find good help I am constantnly saying that its difficult to get good help, but here is

  67. value说道:

    Terrific article. I am just expecting a lot more. You happen to be this kind of good creator.

  68. Well I definitely enjoyed studying it. This information provided by you is very constructive for correct planning.

  69. This is my first time pay a quick visit at here and i am really impressed to read everthing at alone place.

  70. Im grateful for the blog.Thanks Again. Will read on

  71. Waec说道:

    Very interesting subject , thanks for posting. Time flies like an arrow. Fruit flies like a banana. by Lisa Grossman.

  72. School admission说道:

    Regards for all your efforts that you have put in this. very interesting info.

  73. ark ps4 server说道:

    It as awesome for me to have a web site, which is good in favor of my know-how. thanks admin

  74. You are my role models. Many thanks for the post

  75. You completed a few fine points there. I did a search on the matter and found mainly people will have the same opinion with your blog.

  76. I truly appreciate this article.Really looking forward to read more. Will read on

  77. It as actually a great and helpful piece of information. I am happy that you just shared this helpful tidbit with us. Please keep us informed like this. Thank you for sharing.

  78. Open heavens说道:

    Really informative post.Really looking forward to read more. Want more. here

  79. This website was how do you say it? Relevant!! Finally I ave found something that helped me. Thank you!

  80. Usually I don at learn article on blogs, however I would like to say that this write-up very forced me to try and do it! Your writing taste has been amazed me. Thank you, very nice article.

  81. It’а†s in reality a nice and useful piece of info. I am glad that you just shared this useful info with us. Please stay us up to date like this. Thank you for sharing.

  82. I?d should verify with you here. Which is not something I often do! I take pleasure in reading a publish that may make individuals think. Also, thanks for allowing me to comment!

  83. Very good article post.Really thank you! Awesome.

  84. Major thanks for the article.Much thanks again. Great.

  85. Thanks for sharing, this is a fantastic article post.Much thanks again. Fantastic.

  86. Real estate说道:

    Nice post. I learn something new and challenging on blogs I stumbleupon everyday. It will always be exciting to read through content from other authors and practice something from their web sites.

  87. MTN说道:

    upper! Come on over and consult with my website.

  88. Some genuinely select posts on this website , saved to bookmarks.

  89. I will immediately grasp your rss as I can at in finding your e-mail subscription link or e-newsletter service. Do you ave any? Please let me know so that I could subscribe. Thanks.

  90. Open Heavens说道:

    Wow! This blog looks just like my old one! It as on a entirely different subject but it has pretty much the same page layout and design. Wonderful choice of colors!

  91. That is a good tip particularly to those new to the blogosphere. Brief but very accurate information Many thanks for sharing this one. A must read post!

  92. pretty handy material, overall I consider this is worthy of a bookmark, thanks

  93. Really great info can be found on website.

  94. exporter说道:

    Im thankful for the blog post.Thanks Again. Fantastic.

  95. This is getting a bit more subjective, but I much prefer the Zune Marketplace.

  96. This is my first time go to see at here and i am in fact impressed to read all at single place.

  97. pretty handy stuff, overall I feel this is worth a bookmark, thanks

  98. which gives these kinds of stuff in quality?

  99. Billy graham说道:

    SAC LANCEL PAS CHER ??????30????????????????5??????????????? | ????????

  100. Ivana说道:

    Looking forward to reading more. Great article post.Really looking forward to read more. Fantastic.

  101. well defined说道:

    Very interesting details you have noted, thanks for posting.

  102. more information说道:

    I understand this is off subject nevertheless I just wanted to

  103. What a funny blog! I really enjoyed watching this funny video with my family unit as well as with my colleagues.

  104. wow, awesome blog post.Much thanks again. Keep writing.

  105. Thanks for sharing, this is a fantastic article post.Really thank you!

  106. what you have beаА аЂа•n dаА аБТ–аА аЂа•aming of.

  107. Wow! Thank you! I constantly needed to write on my site something like that. Can I implement a portion of your post to my site?

  108. You have made some decent points there. I looked on the internet to find out more about the issue and found most individuals will go along with your views on this site.

  109. Wow, great blog article.Really looking forward to read more. Really Great.

  110. This particular blog is obviously entertaining and also diverting. I have discovered a bunch of useful advices out of this amazing blog. I ad love to return again soon. Thanks a lot!

  111. You might add a related video or a related picture or two to grab readers excited about

  112. Nnamdi说道:

    Im grateful for the article post. Much obliged.

  113. Really informative article.Really thank you! Want more.

  114. Very good article.Thanks Again. Will read on

  115. free ads说道:

    You ave made some good points there. I looked on the net to find out more about the issue and found most individuals will go along with your views on this site.

  116. You have made some decent points there. I looked on the net for more information about the issue and found most individuals will go along with your views on this web site.

  117. for more info说道:

    What as up, I wish for to subscribe for this web site to get most up-to-date updates, so where can i do it please help.|

  118. Nice place of duty. I study impressive added challenging taking place changed blogs everyday. Thankfulness for sharing.

  119. Thanks for sharing, this is a fantastic post.Much thanks again.

  120. This is a good tip especially to those new to the blogosphere. Short but very accurate information Appreciate your sharing this one. A must read post!

  121. This is a really good tip especially to those fresh to the blogosphere. Brief but very precise information Thank you for sharing this one. A must read post!

  122. gohere说道:

    I truly appreciate this blog post.Really looking forward to read more. Really Cool.

  123. I think this is a real great blog article. Keep writing.

  124. Well written articles like yours renews my faith in today as writers. You ave written information I can finally agree on and use. Thank you for sharing.

  125. Thanks-a-mundo for the article post.Really looking forward to read more. Cool.

  126. Very good blog article.Really looking forward to read more.

  127. There is obviously a bunch to identify about this. I consider you made certain good points in features also.

  128. official site说道:

    I simply could not go away your website before suggesting that I actually loved the usual information a person supply for your guests? Is gonna be back incessantly to check up on new posts

  129. more info说道:

    Thanks a lot for the blog article.Much thanks again. Will read on

  130. Some truly prime articles on this web site , bookmarked.

  131. written article. I all make sure to bookmark it and come back to read more of

  132. It as not that I want to copy your web page, but I really like the style and design. Could you let me know which design are you using? Or was it tailor made?

  133. MIAMI SEO说道:

    Thanks a lot for the post.Much thanks again. Want more.

  134. Just discovered this blog through Bing, what a way to brighten up my year!

  135. other details说道:

    in life. I ?ant to encourage you to continue your great

  136. sunday说道:

    woh I love your content, saved to favorites!.

  137. Really appreciate you sharing this article.Much thanks again. Much obliged.

  138. Really appreciate you sharing this post.Really thank you! Really Great.

  139. Very good article. I certainly appreciate this website. Keep writing!

  140. Major thankies for the post.Really looking forward to read more. Will read on

  141. I think this is a real great post.Thanks Again. Will read on

  142. Im grateful for the article. Will read on

  143. This very blog is definitely cool additionally informative. I have picked a bunch of useful tips out of this source. I ad love to visit it over and over again. Thanks!

  144. Game Online说道:

    You have made some really good points there. I looked on the web for additional information about the issue and found most individuals will go along with your views on this web site.

  145. really pleasant piece of writing on building up new weblog.

  146. Simple but very precise information Thank you for sharing this

  147. your host? I want my site loaded up as quickly as yours lol

  148. We all talk just a little about what you should speak about when is shows correspondence to because Perhaps this has much more than one meaning.

  149. Wonderful blog! I found it while searching on Yahoo News. Do you have any tips on how to get listed in Yahoo News? I ave been trying for a while but I never seem to get there! Many thanks

  150. Muchos Gracias for your article post.Thanks Again. Will read on

  151. check out说道:

    Well I truly liked reading it. This tip offered by you is very effective for proper planning.

  152. Thank you for your article post.Thanks Again. Keep writing.

  153. click说道:

    Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass’ favor.

  154. clothing store说道:

    Really appreciate you sharing this blog article. Will read on

  155. I think this is a real great article post.Really looking forward to read more. Will read on

  156. Wow, great article post.Really looking forward to read more. Keep writing.

  157. Barcode Scanner说道:

    This excellent website certainly has all the info I wanted concerning this subject and didn at know who to ask.

  158. Wow! This can be one particular of the most useful blogs We have ever arrive across on this subject. Actually Fantastic. I am also a specialist in this topic so I can understand your hard work.

  159. You have made some really good points there. I looked on the web to learn more about the issue and found most people will go along with your views on this website.

  160. Ariba Sourcing说道:

    Really appreciate you sharing this article.Thanks Again. Keep writing.

  161. bo dam说道:

    Very good post. I absolutely appreciate this site. Keep it up!

  162. I truly appreciate this article post.Really thank you! Want more.

  163. Wow! Thank you! I continually needed to write on my site something like that. Can I take a portion of your post to my blog?

  164. You can not consider simply how so much time I

  165. line? Are you sure concerning the supply?

  166. You have touched some fastidious factors here.

  167. sklad v Pol`she说道:

    Thank you for sharing this excellent write-up. Very interesting ideas! (as always, btw)

  168. You completed certain good points there. I did a search on the theme and found the majority of persons will have the same opinion with your blog.

  169. Thank you ever so for you blog post.Thanks Again. Much obliged.

  170. jimmyjohncodes说道:

    What a funny blog! I in fact enjoyed watching this humorous video with my relatives as well as along with my friends.

  171. There is definately a lot to know about this issue. I love all the points you made.

  172. Thank you ever so for you article.Much thanks again. Want more.

  173. This is really interesting, You are a very skilled blogger. I ave joined your feed and look forward to seeking more of your great post. Also, I ave shared your web site in my social networks!

  174. Covina realtor说道:

    Remarkable! Its actually awesome post, I have got much clear idea

  175. Valuable information and excellent design you got here! I would like to thank you for sharing your thoughts and time into the stuff you post!! Thumbs up!

  176. You have brought up a very superb points , appreciate it for the post.

  177. Major thanks for the post.Thanks Again. Cool.

  178. Pretty! This has been an incredibly wonderful article. Thank you for supplying this info.

  179. know more说道:

    Wow, wonderful blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your web site is great, let alone the content!

  180. Well I truly enjoyed reading it. This information procured by you is very helpful for proper planning.

  181. Your style is unique compared to other folks I ave read stuff from. Thanks for posting when you have the opportunity, Guess I will just bookmark this web site.

  182. Thanks again for the blog article.Thanks Again. Keep writing.

  183. Muchos Gracias for your blog post.Much thanks again. Want more.

  184. Im grateful for the blog article.Really looking forward to read more. Really Cool.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>