百度,淘宝,腾讯三大巨头HTML页面规范分解
<!--[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>
<!--[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]-->
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
chrome=1写法可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果未安装GCF,则使用最高版本的IE内核进行渲染。
百度首页那么点东西他当然不在乎用哪种模式,更多地去照顾老式浏览器; 搜索页倾向于速度有GCF的时候更愿意使用chorme渲染。
不得不吐槽,国内各的银行支付时的兼容支持,由此 IE=Edge
,使 IE 以最新模式渲染得到大家的共同认可似乎也无可厚非。
<!-- 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" />
- 不论 ios、Anroid 还是云OS,最重要的都是 viewport 的设置
- width=device-width 宽度等于设备宽度,初始化比例为1,禁止用户缩放。
- ios 下通过
apple-mobile-web-app-capable
开始桌面全屏模式
<!--[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','\5fae\8f6f\96c5\9ed1'}.g_tips a{color:#676767;padding:0 2px;zoom:1} </style>
<!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>
- 通常情况下CSS放文档开始,脚本放在文档末尾我想不用解释太多
- 如果一个页面足够简单,写在页面上是完全 OK 的,特别是一些简单的专题,但是项目上需谨慎使用
作为一个前端开发,这些你做了吗?
转载于:https://www.cnblogs.com/v10258/p/3520520.html
百度,淘宝,腾讯三大巨头HTML页面规范分解相关推荐
- 仿淘宝电商官网静态页面(HTML+CSS+JS)+ 常见布局解析,学会如果做是关键!
仿淘宝电商官网静态页面 作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它 这是我刚"入坑"的时候写的Demo,因为当 ...
- 从淘宝 UWP 的新功能 -- 比较页面来谈谈 UWP 的窗口多开功能
原文:从淘宝 UWP 的新功能 -- 比较页面来谈谈 UWP 的窗口多开功能 前言 之前在 剁手党也有春天 -- 淘宝 UWP "比较"功能诞生记 这篇随笔中介绍了一下 UWP 淘 ...
- Django实现迷你淘宝(四) --- 基于Bootstrap的商品页面设计与美化
欢迎查看本系列的其他文章: postgres安装与入门 django安装与入门 基于django的用户验证系统实现 基于Bootstrap的商品页面设计与美化 基于jQuery和AJax的购物车设计与 ...
- 淘宝 腾讯 百度 新浪 技术团队 博客
From:http://blog.csdn.net/perfect2011/article/details/18844575 csdn lidp http://blog.csdn.net/perfe ...
- 淘宝 腾讯 百度 技术团队 博客
转自:http://blog.csdn.net/perfectpdl/article/details/6926749 淘宝核心系统团队博客 http://rdc.taobao.com/blog/cs/ ...
- 百度淘宝关键词排名系统【胖虎图图-互动点击专家】
软件绿色免安装,打开即可使用,胖虎图图互动点击专家. 软件大小:1.4MB 支持平台:win2000/win2003/winxp/win7/win8 下载地址:http://www.phtoto.co ...
- 淘宝SEO的三大策略
一个成功的淘宝店铺,自然搜索流量应占店铺总流量的40%以上,为什么这么说?其一:淘宝搜索流量非常巨大,其二:淘宝搜索流量转化率最高.通过图中数据魔方我们可以看到凡是热销的宝贝,他的淘宝站内搜索流量往往 ...
- 一键获取网页中的全部图片并批量下载(国内淘宝天猫京东网站+国外商品页面)——亲测有效
上周六的时候,有个朋友找到我,需要将网页中的图片全部下载下来,而且还不能改变图片的大小: 作为一个前端,经常跟html打交道,我深知页面中肯定是有图片链接的 网页中下载少量图片的方法 举例说明网页中图 ...
- Android WebView加载淘宝拼多多及其他第三方页面问题
阔别Android一年多,最近又接手过来公司里的Android端的项目,按照需求如果手机中没有安装淘宝或者拼多多.京东及其他app应用就在应用内使用webview加载第三方应用页面,但是一直错误重定向 ...
最新文章
- Could not find destination factory for transport
- 鼓作气学会“一致性哈希”,就靠这 18 张图了
- Struts2StudentsInfoManage学生管理系统struts2版
- 2016 China Joy抢先看,文末有彩蛋!
- CF819E:Mister B and Flight to the Moon(构造、归纳法)
- python3 while循环语句_python While 循环语句
- munin mysql_munin 监控 mysql 2种方法
- Request的getParameter和getAttribute方法的区别
- Hadoop yarn配置参数
- 弹出浮层css+JQuery
- 使用华为云WeLink,体验无纸化办公的这些优点
- kippo mysql_浅析开源蜜罐识别与全网测绘
- # gazebo 仿真
- no matching function for call to ‘cv2eigen‘
- 屏库是个很好的网站,囊括了几乎所有型号的显示屏
- 全站翻译分享---Localize平台的使用方式整理--Star.hou
- 【SpringBoot-3】Lombok使用详解
- 安卓 体验linux mux,Linux下TI omap芯片 MUX 配置分析(以AM335X芯片为例)
- Java学习---面向对象与多维数组
- 全球及中国护手霜和护手乳液行业盈利前景及竞争格局展望报告2022-2027年
热门文章
- 嵌入式Linux入门13:应用层调试
- 【elasticsearch】ES 单分片使用 From/Size 分页遇到重复数据
- Spring-Jpa : @MappedSuperclass的作用
- 95-190-446-源码-window-Trigger-DeltaTrigger
- 【hadoop】ipc.Client: Retrying connect to server: xxx:8020. Already tried 37 time(s) RetryPolicy[Multi
- 【MySQL】Java.sql.SQLException Incorrect string value: \xF0\x9F\x98\x8D\xE8\xBE...
- 【Janino】Janino框架初识与使用教程
- Oracle报错:IO Error: Invalid number format for port number
- Cookie、Session、Token、JWT分别是什么(四)
- 实战 RocketMQ 流量削峰,怎么能错过这一篇!