网页自动调用国内双核浏览器的极速模式的实现方法

 更新时间:2016年9月20日 18:58  点击:2744
由于国内好几个浏览器都是双核浏览器(蛋痛,做一个浏览器壳就说国产,而且使用率高),有时打开网页会出现不兼容模式,在极速模式下是好的,现在我们来用代码实现网页自动调用国内双核浏览器的极速模式。

国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站.
代码示例
在head标签中添加一行代码:

<html>
  <head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
  </head>
  <body>
  </body>
</html>

content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。
若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand">

各渲染内核的技术细节

内核     Webkit     IE兼容     IE标准
文档模式     Chrome 21     IE6/7     IE9/IE10/IE11(取决于用户的IE)
HTML5支持     YES     NO     YES
ActiveX控件支持     NO     YES     YES

各内核UA示例

网页自动调用国内双核浏览器的极速模式的实现方法

 

我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧.

 

单一的 zh 和 zh-CN 均属于废弃用法。

问题主要在于,zh 现在不是语言code了,而是macrolang,能作为语言code的是cmn(国语)、yue(粤语)、wuu(吴语)等。我通常建议写成 zh-cmn 而不是光写 cmn,主要是考虑兼容性(至少可匹配 zh),有不少软件和框架还没有据此更新。

zh-CN 的问题还在于,其实多数情况下标记的是简体中文,但是不恰当的使用了地区,这导致同样用简体中文的 zh-SG(新加坡)等无法匹配。更典型的是 zh-TW 和 zh-HK。所以其实应该使用 zh-Hans / zh-Hant 来表示简体和繁体。那么完整的写法就是 zh-cmn-Hans,表示简体中文书写的普通话/国语。一般而言没有必要加地区代码,除非要表示地区特异性,一般是词汇不一样(比如维基百科的大陆简体和新马简体)。

如何标记的例子:

简体中文页面:html lang=zh-cmn-Hans
繁体中文页面:html lang=zh-cmn-Hant
英语页面:html lang=en

需要加地区代码的情况一般比较少,除非为了强调不同地区汉语使用差异。比如:

<p lang="zh-cmn-Hans">
<b lang="zh-cmn-Hans-CN">菠萝</b>和<b lang="zh-cmn-Hant-TW">?梨</b>其实是同一种水果。只是大陆和台湾称谓不同,且新马一带的称谓也是不同的,称之为<b lang="zh-cmn-Hans-SG">黄梨</b>。
</p>
当然,由于历史原因,有时候不得不继续使用zh-CN。比如中文维基百科,沿用了传统的zh-CN/zh-HK/zh-SG/zh-TW(按照标准应该使用 zh-cmn-Hans-CN、zh-cmn-Hant-HK、zh-cmn-Hans-SG、zh-cmn-Hant-TW)。这时候,合理的软件行为,是将 zh-CN 等转化为 zh-cmn-Hans(即转化为最常见的误用所对应的实际标准写法)。

实际上,各相关标准,也存在一定的滞后。例如CSS的:lang选择器,不支持选择仅仅简体/繁体中文(而不管是cmn或是yue或是min等汉语方言)。理想情况是CSS3对:lang选择器的语法进行升级,即BCP 47中的高级匹配算法,支持 :lang(*-Hans)这样的写法。

刚来公司上班的时候,看到以前的程序员写的程序里面调用http地址是,不是用http而是用双斜杠//开头,刚开始不知道这样写有什么好处,虽然能够正常浏览,后来在网上找了资料,才发现原来是这么回事。

不知道大家有没有见过下面这种 url 写法:

<IMG src="file://xxx.net/img/logo.png">

img 中的url是以双斜杠“//”开头的,这种写法有特殊的用途,它会判断当前的页面协议是http 还是 https 来决定请求 url 的协议。防止IE下出现“This Page Contains Both Secure and Non-Secure Items”的报错。

在img中以双斜杠//开头的URL是有何作用?

但是当你浏览本地文件的时候,它会解析为 file:// 协议。这种特性可以用来加载CDN:

也适用于CSS:

.omgomg { background: url(//lvtao.net/lvtao.gif); }

注意:如果在IE7,IE8中使用 和 @import 引入 CSS 的时候,会下载两次 CSS 文件。

参考:http://www.paulirish.com/2010/the-protocol-relative-url/

在css+div网页制作中,PS切图是比较重要的,图片切得好就使工作事半功倍,现在我们来讲讲网页制作PS切图教程。

认识Photoshop(PS)CSS切图必用工具

Adobe PHOTOSHOP平时我们又被称为PS。

CSS必备切图工具PS截图

 

div CSS必备切图工具PS截图

多数人对于PHOTOSHOP的了解仅限于“一个很好的图像编辑软件”,并不知道它的诸多应用方面,实际上,PHOTOSHOP的应用领域很广泛的,在图像、图形、文字、视频、出版各方面都有涉及。

请看下面介绍:

平面设计

平面设计是PHOTOSHOP应用最为广泛的领域,无论是我们正在阅读的图书封面,还是大街上看到的招帖、海报,这些具有丰富图像的平面印刷品,基本上都需要PHOTOSHOP软件对图像进行处理。

修复照片

PHOTOSHOP具有强大的图像修饰功能。利用这些功能,可以快速修复一张破损的老照片,也可以修复人脸上的斑点等缺陷。

广告摄影

广告摄影作为一种对视觉要求非常严格的工作,其最终成品往往要经过PHOTOSHOP的修改才能得到满意的效果。

影像创意

影像创意是PHOTOSHOP的特长,通过PHOTOSHOP的处理可以将原本风马牛不相及的对象组合在一起,也可以使用“狸猫换太子”的手段使图像发生面目全非的巨大变化。

艺术文字

当文字遇到PHOTOSHOP处理,就已经注定不再普通。利用PHOTOSHOP可以使文字发生各种各样的变化,并利用这些艺术化处理后的文字为图像增加效果。

网页制作

网络的普及是促使更多人需要掌握PHOTOSHOP的一个重要原因。因为在制作网页时PHOTOSHOP是必不可少的网页图像处理软件。

建筑效果图后期修饰

在制作建筑效果图包括许多三维场景时,人物与配景包括场景的颜色常常需要在PHOTOSHOP中增加并调整。

绘画

由于PHOTOSHOP具有良好的绘画与调色功能,许多插画设计制作者往往使用铅笔绘制草稿,然后用PHOTOSHOP填色的方法来绘制插画。

除此之外,近些年来非常流行的像素画也多为设计师使用PHOTOSHOP创作的作品。

绘制或处理三维帖图

在三维软件中,如果能够制作出精良的模型,而无法为模型应用逼真的帖图,也无法得到较好的渲染效果。实际上在制作材质时,除了要依靠软件本身具有材质功能外,利用PHOTOSHOP可以制作在三维软件中无法得到的合适的材质也非常重要。

婚纱照片设计

当前越来越多的婚纱影楼开始使用数码相机,这也便得婚纱照片设计的处理成为一个新兴的行业。

视觉创意

视觉创意与设计是设计艺术的一个分支,此类设计通常没有非常明显的商业目的,但由于他为广大设计爱好者提供了广阔的设计空间,因此越来越多的设计爱好者开始了学习PHOTOSHOP,并进行具有个人特色与风格的视觉创意。

图标制作

虽然使用PHOTOSHOP制作图标在感觉上有些大材小用,但使用此软件制作的图标的确非常精美。

界面设计

界面设计是一个新兴的领域,已经受到越来越多的软件企业及开发者的重视,虽然暂时还未成为一种全新的职业,但相信不久一定会出现专业的界面设计师职业。在当前还没有用于做界面设计的专业软件,因此绝大多数设计者使用的都是PHOTOSHOP。

上述列出了PHOTOSHOP应用的13大领域,但实际上其应用不止上述这些。例如,目前的影视后期制作及二维动画制作,PHOTOSHOP也有所应用的。

PHOTOSHOP的特色:

从功能上看,Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。

图像编辑是图像处理的基础,可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场,去除人像上不满意的部分,进行美化加工,得到让人非常满意的效果。

图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像,这是美术设计的必经之路。photoshop提供的绘图工具让外来图像与创意很好地融合,成为可能使图像的合成天衣无缝。

校色调色是photoshop中深具威力的功能之一,可方便快捷地对图像的颜色进行明暗、色编的调整和校正,也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。

特效制作在photoshop中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作,如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由photoshop特效完成。而各种特效字的制作更是很多美术设计师热衷于photoshop的研究的原因。

以上信息引用百度百科photoshop介绍:http://baike.baidu.com/view/2929.htm

我们推荐使用Adobe Photoshop CS 8.0版本

总结:

photoshop这里对于我们来说主要是让大家认识是网页美工制作工具,网页美工开发工具,div+css重构必备工具,一般设计的网页美工都是没有合层的是以PSD格式保存的,所以注意的是如果你用PS设计网页美工最后不要将文件图层合并,最后一PSD格式保存,以便以后的修改及切图。

PS软件在DIV CSS开发中用于做什么

Photoshop软件简称PS在DIV CSS开发中用于做什么?

在DIV CSS开发中PS软件是必不可少的软件,主要用于DIV+CSS开发时切出布局图片素材、获取宽度值、获取高度值、获取颜色值、获取padding值、获取margin值等。

在整个CSS开发PS扮演角色

在CSS DIV开发中PS软件一直是使用的,因为整个开发全程都需要PS打开美工图(常见PSD文件),因为我们布局时所设置样式单词或样式值都需要使用PS软件获得,所以整个开发过程中CSS代码开发时软件与PS软件同时打开使用。

PS开发中得到什么?

在CSS布局中所有样式值都是从美工图上获取得到,而非猜测随意设置样式值。比如设置宽度、高度、padding、margin的尺寸值都是使用PS软件从打开美工图中使用切片工具获得,具体获得方法技巧截图DIVCSS5会在后面PS教程给出;当然网页布局中设置背景颜色、字体颜色、边框颜色等这些具体的值当然也是100%从美工图获取准确的颜色值,而非自己凭空猜测大概设置。

我们在布局CSS时,具体长度尺寸很大时候不能误差1px,颜色值也是不能有误差,不然这里误差一点那里误差一点最后制作出HTML可想而知,当然是不能使用而且不严谨。

DIVCSS5最后提示:

在开发CSS过程中随时都是开发CSS软件和PS软件都是一直同时打开,开发代码过程中需要值马上回到PS软件准确获取,当然很多都不会PS软件,不过没事其实在CSS开发中用到PS软件就那几个功能和技巧,接下来DIVCSS5会陆续为大家以图文教程方式奉献出。

PS软件CSS切图应用常用快捷键

Photoshop软件CSS切图应用常用快捷键介绍

本节DIVCSS5为大家介绍在切图时PS软件的常用快捷键,通过快捷键介绍让不会PS的您也对PS有一定应用。

1、放大美工图

ctrl+++

按住“Ctrl”键不放然后按“+”加号键即可不断放大所打开美工图

2、缩小美工图

ctrl---

按住“Ctrl”键不放然后按“-”减号键即可不断缩小所打开美工图

3、拖动美工图

按住“空格键”不放时鼠标会变成手掌一样图标,这个时候鼠标点击不放移动即可拖动整个网页美工图

4、全屏与固定屏幕模式

将网页美工图转为不固定拖动范围,英文小写输入情况按“F”字母键,切换,可以三种模式互转

Photoshop之CSS切图时常用工具

Photoshop切图时常用工具,CSS div制作前PS软件常用工具介绍。

1、移动工具

css ps移动工具截图

 

ps 移动工具截图

常用于选中图层对象使用,移动选中图层对应内容(图片或文字图层)在美工图位置

2、切片工具

切片工具截图

 

ps切片工具截图

切片工具,是切图最重要的工具,在美工图上直接可以画好要切出的图片区域,最后即可导出为可以使用CSS布局的图片素材。

3、切片选择工具

切片选择工具截图

 

ps切片选择工具截图

切片选择工具其实是与切片工具对应,在一个美工图中,使用切片工具会切出很多切片区域,但是要修改或选择以前切片划分好的切片这个使用就只能使用切片选择工具才能选中对应切片区域进行选择或修改。

4、前景色

ps前景色

 

前景色

两个正方形一样是方块,浮动最上面为前景色。前景色可以使用快捷键“alt+del”组合键,填充对应虚线选区或图层。

5、背景色

背景色

 

ps背景色工具截图

两个正方形一样是方块,靠后为背景色。背景色可以使用快捷键“ctrl+del”组合键,填充对应虚线选区或图层。

6、字体工具

css ps字体工具截图

 

ps字体工具截图

字体工具可以点击后在设计图上直接点击后输入文字,文字可以改变字体大小、字体、加粗、斜体等美化效果。

[!--infotagslink--]

相关文章

  • php抓取网站图片并保存的实现方法

    php如何实现抓取网页图片,相较于手动的粘贴复制,使用小程序要方便快捷多了,喜欢编程的人总会喜欢制作一些简单有用的小软件,最近就参考了网上一个php抓取图片代码,封装了一个php远程抓取图片的类,测试了一下,效果还不错分享...2015-10-30
  • JavaScript判断浏览器及其版本信息

    本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
  • js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
  • mysql 批量更新与批量更新多条记录的不同值实现方法

    批量更新mysql更新语句很简单,更新一条数据的某个字段,一般这样写:复制代码 代码如下:UPDATE mytable SET myfield = 'value' WHERE other_field = 'other_value';如果更新同一字段为同一个值,mysql也很简单,修改下where即...2013-10-04
  • Postgresql 如何选择正确的关闭模式

    这篇文章主要介绍了Postgresl 如何选择正确的关闭模式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-18
  • javascript设计模式之解释器模式详解

    神马是“解释器模式”?先翻开《GOF》看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如...2014-06-07
  • js识别uc浏览器的代码

    其实挺简单的就是if(navigator.userAgent.indexOf('UCBrowser') > -1) {alert("uc浏览器");}else{//不是uc浏览器执行的操作}如果想测试某个浏览器的特征可以通过如下方法获取JS获取浏览器信息 浏览器代码名称:navigator...2015-11-08
  • EXCEL数据上传到SQL SERVER中的简单实现方法

    EXCEL数据上传到SQL SERVER中的方法需要注意到三点!注意点一:要把EXCEL数据上传到SQL SERVER中必须提前把EXCEL传到服务器上.做法: 在ASP.NET环境中,添加一个FileUpload上传控件后台代码的E.X: 复制代码 代码如下: if...2013-09-23
  • 学习JavaScript设计模式之装饰者模式

    这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
  • 如何开启mysql中的严格模式

    很多集成的PHP环境(PHPnow WAMP Appserv等)自带的MySQL貌似都没有开启MySQL的严格模式,何为MySQL的严格模式,简单来说就是MySQL自身对数据进行严格的校验(格式、长度、类型等),比如一个整型字段我们写入一个字符串类型的数...2013-10-04
  • js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本

    第一种,只区分浏览器,不考虑版本 复制代码 代码如下:function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; if (isOp...2014-05-31
  • 详解Vue Cli浏览器兼容性实践

    这篇文章主要介绍了详解Vue Cli浏览器兼容性实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-09
  • c#标准idispose模式使用示例

    下面将把C#里实现IDispose模式的代码展现出来,大家一起来学习一下,它的使用场合也很多的,当我们手动对网站,数据库作封装时,都会用的到...2020-06-25
  • 如何使用 JavaScript 操作浏览器历史记录 API

    这篇文章主要介绍了如何使用 JavaScript 操作浏览器历史记录 API,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...2020-11-24
  • Python获取浏览器窗口句柄过程解析

    这篇文章主要介绍了Python获取浏览器窗口句柄过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-26
  • C# MVC模式中应该怎样区分应用程序逻辑(Controller层)和业务逻辑(Model层)?

    这篇文章主要介绍了C# MVC模式中应该怎样区分应用程序逻辑(Controller层)和业务逻辑(Model层)?,这也小编做.NET项目时经常思考和让人混乱的一个问题,这篇文章写的挺好,一下清晰了许多,需要的朋友可以参考下...2020-06-25
  • vue如何调用浏览器分享功能详解

    这篇文章主要给大家介绍了关于vue如何调用浏览器分享的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-20
  • js判断浏览器类型,版本的代码(附多个实例代码)

    在网站前端开发中,浏览器兼容性问题本已让我们手忙脚乱,Chrome的出世不知道又要给我们添多少乱子。浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。 JavaScrip...2014-05-31
  • PHP翻页跳转功能实现方法

    我们都知道用php+mysql在web 页实现数据库资料全部显示是非常简单而有趣的,数据库资料很少的情况下页面显示还是让人满意的,但是当数据库资料非常多的情况下,页面的显示情况将会变的非常糟糕,下面就来介绍一下如何实现当...2015-11-08
  • JavaScript设计模式之职责链模式

    这篇文章主要介绍了JavaScript设计模式之职责链模式,对设计模式感兴趣的同学,可以参考下...2021-04-25