码农备忘录

我们在浏览网页的时候，浏览器需要把网页上的内容，包括网页HTML，CSS，JS，FLASH和图片等下载到本地，然后把它们显示出来。如果网页上的内容是固定的，下载速度也不是你我能控制的，但下载的大小则是可以控制的，只需要你再传送的过程中先把内容压缩优化一下即可。

对于一般的HTML，CSS和JS文件，GZIP的压缩比率达50%到80%，节约的流量是非常惊人的。相应的静态文本压缩的Apache模块有两种，GZIP和DEFLATE，后者更好，不过这都没啥选择，完全看服务器是否提供，个人无法配置，比如使用最多的Bluehost和Dreamhost都不支持。除了服务器本身提供的压缩之外，我们还可以对标准格式的CSS和JS等文件进行手动压缩优化。

Steve Souders在他的《High Performance Web Sites》一书中提出提高网页效率的14条准则，这些可以使用Yahoo! YSlow来进行一个比较形象的检测。这里主要来说一下第一条准则：Make Fewer HTTP Requests，意思就是尽可能的减少HTTP请求。当时要达到这个目的有很多种方法，其中最重要的一点就是将CSS文件和Javascript文件分别进行压缩和合并，这样就在很大程度上减少了浏览器对服务器的HTTP请求，另外一旦被浏览器下载到本地可以对此进行缓存，从而提高了加载速度。

压缩方法：

减少注释和不必要空格，多行合并，优化代码，减小文件大小。

关于压缩工具：

网络上常见的工具是简单的正则、字符串替换， 这种压缩方法比较传统，压缩后的代码可能在安全稳定方面有不足。除此之外，业界近几年出现了几个知名的压缩内核，内核模拟浏览器词法分析，压缩后的代码非常的安全稳定。

UglifyJS 是用 NodeJS 编写的 JavaScript 压缩工具，是目前最流行的JS压缩工具，JQuery 就是使用此工具压缩，UglifyJS 压缩率高，压缩选项多，并且具有优化代码，格式化代码功能。

YUI compressor 是Java编写的压缩工具，由雅虎发布，压缩是 100％ 的安全，比大多数其他工具有更高的压缩比， 一般代码的压缩率达到 40％ 至 60％，YUI compressor 也能够压缩CSS文件，国内互联网公司，阿里、淘宝、百度等都是采用 YUI compressor 内核压缩后发布代码。

JSPacker 由PHP编写的压缩工具，可以混淆代码保护知识产权，产生的代码兼容IE、FireFox等常用浏览器，国内大部分在线工具网站都采用这种算法压缩，只因为此算法采用PHP编写，正则表达式替换语句，没有语法分析内核，环境搭建成本低，压缩率上远不如以上两种内核，并且混淆代码页不符合开源精神。

JsMin 是用C语言编写的一个轻量级JS压缩器，去除JavaScript文件中的注释和不必要的空格。它通常减少了一半的文件大小，从而导致更快的下载速度。

对于其他压缩内核比如 Google Closure Compiler 根据反馈，由于压缩出错率太高，并且不是主流压缩内核，使用相对比较少一些。

压缩工具使用：

网上很轻松就能找到各种在线压缩工具，使用的内核各不相同。当然我们在压缩文件时候尽量使用软件进行压缩，方便快捷，安全稳定。

这里介绍一种国人（zjfree）做的压缩工具：JsCssZip，使用的压缩算法为：YUI Compressor for .Net，使用VS2005 C#开发，可以将指定目录包含的所有JS或CSS压缩，压缩生成的文件存储在“_bak”目录下。工具大家可以网上搜。

压缩好处：

文件压缩、减少文件数量等都是前台页面优化的措施，主要对网页加速有四点：1、减小了文件的体积；2、减小了网络传输量和带宽占用；3、减小了服务器的处理的压力；4、提高了页面的渲染显示的速度。

在前端制作的过程中会发现，一些文字/图片链接，或者一些input控件，在点击时会在周围出现虚线边框，一般会在火狐和IE浏览器下出现虚线框，谷歌下不会有。
这些虚线边框是作为对视觉设计的一种辅助，在不使用鼠标，而用键盘Tab键进行页面浏览时，会标示出当前所在的链接或控件的位置，便于浏览。这对那些视觉有障碍的人士来说更是必不可少的。

但是有些时候我们却不想使用它们，因为浏览器对虚线框的解析有差异，并且不规则，所以在视觉设计上反而成为了某种缺陷。所以这种时候，我们想要禁用这些虚线边框，使浏览者的视觉享受能够完美无瑕。

那么，如何去除这些点击时才会出现的虚线边框呢？

1. outline:none;

通常我们会这么写：a,input{outline:none;}

优点是代码简洁，使用一行css就能解决问题，但是也有缺点：ie6、ie7并不认识outline属性，需要配合仅ie6和ie7支持的css属性blr:expression_r(this.onFocus=this.blur());使用来达到兼容，expression 条件，这句话的意思是链接在获得焦点的同时失去焦点，但是blr不宜多用，会影响效率。

2. hidefocus=”true”;
hidefocus是ie系列的专有属性，能够作用于所有ie序列的浏览器，需要配合css的outline：none。
也可以写作：hidefocus=”hidefocus”;
另外，hidefocus并不是W3C推荐的标准属性。
缺点是非全局控制，需要在每个需要去虚线边框的链接或input上加代码。

3. onfocus=”this.blur()”;
优点是比较通用。
缺点也很多，首先同2一样，也是属于局部控制的手段，需要在每一个需要去虚线边框的标签上使用；
然后这是属于script范畴，对于禁用JavaScript的用户来说不起作用；
将script直接写在html中对于页面效率有负面作用。
该方法需要与border:none;配合使用。

4. :active{outline:none;}
与1大致相同，唯一的区别是会在Tab键切换时出现虚线边框。

5. ::-moz-focus-inner{outline:none;}
Firefox的专有属性，在去除input的虚线边框时需要使用到此属性。
但是经测试，应该对select无作用。

6. 使用JS遍历每一个链接

window.onload=function()
{
for(var ii=0; ii<document.links.length; ii++)
document.links$[$ii$]$.onfocus=function(){this.blur()}
}

之前在一些网站发现了一个好玩的样式，就是鼠标移到网站LOGO上，logo会自动抖动起来，显得非常炫酷。我也是十分感兴趣。自从本站新添加了一个视觉设计的分类之后，我也是想起来有个抖动CSS样式CSS Shake，所以今天给小伙伴们分享一下，希望小伙伴们能够喜欢。

CSS Shake是一个使用CSS3实现的动画样式，使用SASS编写，利用它我们可以实现多种不同样式的抖动效果。比如自动抖动、鼠标悬停抖动、鼠标划过抖动。这个效果很好玩，可以用到logo、图标、按钮或者标题上面，显得很酷炫。废话不多说，直接上图：

如何在网页中调用呢？当然不是简简单单几个代码就能搞定，需要调用CSS Shake代码文件。

详细教程请跳转http://www.zuifengyun.com/css-dou-dong-yang-shi.html

如果要想在IE浏览器中实现圆角的效果，我们一般都会采用圆角图片的方式。用图片的话，基本就跟浏览器没有多大关系了，因为任何浏览器都支持这种方式。今天我们主要是讲解如果用CSS3样式表来实现圆角效果，值得注意的是，IE6/7/8这三个IE浏览器版本都不支持CSS3的解析，只有还不太主流的IE9支持CSS3和HTML5的标准。让IE支持CSS3的解析方法有很多种，下面介绍一种实用的让IE支持CSS3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角：

1、下载一个压缩包，里面有一个微软的脚本文件（11KB）和一个用来测试服务器是否有正确的Content-Type的HTML文件：iecss3.rar；.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。

解压后，打开test.html，如果显示效果是圆角，则可以继续。

使用演示：

[css].main{
border: 2px solid #C0C0C0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position:relative;
z-index:2;
behavior: url(此处为ie-css3.htc文件的绝对路径);
}[/css]

Webkit内核的浏览器支持“-webkit-border-radius: 10px;”属性（10px是圆角半径），可以直接解析出圆角；Firefox浏览器支持“-moz-border-radius: 10px;”属性，也是可以直接解析出圆角；IE系浏览器则需要加上“border-radius: 15px;”的属性。

注意：

1、behavior的url里一定要填写ie-css3.htc的绝对路径，因为 IE浏览器找该文件是相对当前html文件路径来找的，所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。

2、一定要有定位属性：position:relative;

3、因为在IE浏览器下这些CSS3效果的实现是要借助于VML，由VML绘制圆角或是投影效果，所以还需要一个z-index属性。z-index属性最好设置得比较大，如2。

4、如果在IE浏览器下某些模块无法用此渲染，可以试着绝对定位相应的层，即加上“ width: 400px; height:400px;”属性。

5、radius属性的10px是圆角半径，还可以给两个值如“border-radius: 10px 5px;”，这样则左上角与右下角半径为10px，右上角与左下角半径为5px。也可以赋4个值，为“上 右 下 左”。

问题一:看什么书

如果只想建立一个自己的主页，事实上并不需要掌握太深奥的知识，因为笔者认为，网上有很多现成的资源可以利用，如果自己去花钱买书专门来学，恐怕有点“杀鸡用牛刀”，花大力气办小事情的感觉。当然，如果要学会制作主页，笔者认为至少需要以下方面的知识:

HTML:最基本的知识，如果HTML知识掌握得好，可以用记事本就可以熟练编写网页(当然，不推荐这么做，因为有现成的工具可以帮助编写HTML，但拥有这种能力是很好的)会对日后使用编辑主页，编写ASP或PHP代码有极大帮助。

ASP或PHP:ASP和PHP可以称得上编写动态主页的主流语言环境。对于入门者如果编程经验很少，可以从简单的语言起步，如微软公司的VBScript脚本语言，如果已经有不少编程经验，建议学习PHP或JavaScript语言，PHP在商业网站中应用得较为广泛。如果希望谋一份网站制作的工作，学好PHP还是很值得的;

对于JavaScript而言，可用于端(比如ASP编程),也于应用于客户端编程(比如制作一些DHTML动态效果等),而且JavaScript已被欧洲标准协会列为一门语言标准，将来的应用也会很广泛(例如Flash的脚本语言也采用了JavaScript);

总之，想从简单起步，可以看一些ASP+VBScript的，

如果想学得更深入，应该学习ASP+JavaScript和PHP.

问题二:如何做好一个网站

笔者认为，一个网站更多时候不是“写”出来的，而是“设计”出来的，设计大体包括二方面内容:功能设计及界面设计.

功能设计依照网站面向的用户而定，建议多参考一些专业网站(而不是大众型网站，如网易，搜狐等)的功能设计，专业网站的特点是针对性强，功能设计与其专业性质有息息相关，能很好的显示功能设计.

界面设计即简单又不简单，简单的是界面设计只是在功能设计的基础上作一些美工设计;不简单的是，要设计既得好看，又与功能设计很贴切是很考究制作者的美术和平面设计功底的。对于不会设计的朋友，可以多参考一些专业设计网站，如蚁盟等，看一下专业设计师如何，排版,图片如何与文字和谐搭配等。

读者可参考一些专业设计，如工业设计，平面设计，虽然与直接搭不上关系，但笔者认为学设计其实是学习设计理念，而设计的理念是可以触类旁通的。同时，多参考一些设计得比较好的网站对设计是很有益处的。

我们经常会在一个技术性网站或BBS见到这三个东东：XHTML DHTML SHTML，它们到底是怎么回事呢？我们看下面的说明与讲解。

XHTML：

HTML是一种基本的WEB语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。

2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。下面是W3C的HTML工作组主席Steven Pemberton回答的关于XHTML的常见基础问题。

（1）XHTML解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存在三个主要缺点：不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML；由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML；数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML过度的一个桥梁。

（2）XML是web发展的趋势，所以人们急切的希望加入XML的潮流中。XHTML是当前替代HTML4标记语言的标准，使用XHTML 1.0，只要你小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，你可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到XML。

（3）使用XHTML的另一个优势是：它非常严密。当前网络上的HTML的糟糕情况让人震惊，早期的浏览器接受私有的HTML标签，所以人们在页面设计完毕后必须使用各种浏览器来检测页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览器。

（4）XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。

（5）XHTML是Web标准家族的一部分，能很好在无线设备等其它用户代理上。

（6）在方面，XHTML可助你去掉表现层代码的恶习，帮助你养成标记校验来测试页面工作的习惯。

DHTML：

DHTML只是一种制作网页的概念，实际上没有一个组织或机构推出过所谓的DHTML标准或技术规范之类的。DHTML不是一种技术、标准或规范，DHTML只是一种将目前已有的网页技术、语言标准整和运用，制作出能在下载后仍然能实时变换页面元素效果的网页的设计概念。

DHTML大致包含以下网页技术、标准或规范：

HTML 4.0 　没什么好说的，网页的基础语言标准。

CSSL 注意！不是CSS，是CSSL，它是Clent-Side Scripting Language的缩写，译作“客户端脚本语言”，主要有JavaScript(JS)，VBScript(VBS)，JScript。Netscape主要支持JS，IE主要支持JS，VBS和JScript。

DOM Document Object Model的缩写，译作“文档对象模型”，是W3C日前极力推广的web技术标准之一，它将网页中的内容抽象成对象，每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events)，这些都可以通过上面讲到的CSSL来进行控制。IE和NS的对象模型都是以W3C的公布的DOM为基准，加上自己的Extended Object(扩展对象)来生成的。

CSS 这才是Cascading Style Sheets(层叠样式表单)的缩写，也是本站52CSS.com的主题，它是HTML的辅助设计规范，用来弥补HTML在排版上的所受的限制导致的不足，它是DOM的一部分。理论上说通过CSSL动态地改变CSS属性可以做出任何你想要的页面视觉效果。

所以，简单地说，要实现DHTML，就是以HTML为基础，运用DOM将页面元素对象化，利用CSSL控制这些对象的CSS属性以达到网页的动态视觉效果。

SHTML：

问起SHTML和HTML的区别,如果用一句话来解释就是：SHTML不是HTML而是一种 API，是动态产成的html。

虽然两者都是超文本格式,但是一种用于SSI技术的文件。 也就是Server Side Include–SSI 端包含指令。 如果Web Server有SSI功能的话(大多数（尤其是基于Unix平台）的WEB如Netscape Enterprise Server等均支持SSI命令)。 会对文件特殊招待。 先扫一次文件看没有特殊的SSI指令现在。 有就按Web Server设定规则解释SSI指令。 解释完后跟一般html一起掉去客户端。

SHTML使用SSI(Server Side Include)的html文件扩展名，SSI（Server Side Include)，通常称为”端嵌入”或者叫”端包含”，是一种类似于ASP的基于的技术。

SSI工作原理：

将内容发送到浏览器之前，可以使用“端包含 (SSI)”指令将文本、图形或应用程序信息包含到网页中。例如，可以使用 SSI 包含时间/日期戳、版权声明或供客户填写并返回的表单。对于在多个文件中重复出现的文本或图形，使用包含文件是一种简便的方法。将内容存入一个包含文件中即可，而不必将内容输入所有文件。通过一个非常简单的语句即可调用包含文件，此语句指示 Web 将内容插入适当网页。而且，使用包含文件时，对内容的所有更改只需在一个地方就能完成。

因为包含 SSI 指令的文件要求特殊处理，所以必须为所有 SSI 文件赋予 SSI 文件扩展名。默认扩展名是 .stm、.shtm 和 .

Web 在处理网页的同时处理 SSI 指令。当 Web 遇到 SSI 指令时，直接将包含文件的内容插入 HTML 网页。如果“包含文件”中包含 SSI 指令，则同时插入此文件。除了用于包含文件的基本指令之外，还可以使用 SSI 指令插入文件的相关信息（如文件的大小）或者运行应用程序或 shell 命令。

网站维护常常碰到的一个问题是，网站的结构已经固定，却为了更新一点内容而不得不重做一大批网页。SSI提供了一种简单、有效的方法来解决这一问题，它将一个网站的基本结构放在几个简单的HTML文件中（模板），以后我们要做的只是将文本传到，让程序按照模板自动生成网页，从而使管理大型网站变得容易。

所以,利用SHTML格式的页面目的和 ASP 差不多，但是因为是 API 所以运转速度更快，效率更高,比ASP快，比HTML慢，但由于可以使用端包含，因此使页面更新容易（特别是批量更新banner，版权等）,想象一下吧,你有一段 HTML,要在中间穿插一些特殊的服务端脚本,比如插入其他 HTML 段落,你选择 ASP 来完成这个任务,但是如果任务更繁重，需要更多的时间，比如5s，这个时候你不用 ASP 而用 SHTML,或许处理时间就只用4s了.

CSS3实现的网页侧边栏效果，点击指定按钮，显示或隐藏侧菜单，CSS3运行于HTML5环境，IE8及以下版本不支持，因此测试时请确认你的浏览器支持HTML5技术，推荐使用火狐或谷歌Chrome浏览器。

所谓“响应式网页设计(Responsive Web Design)”也就是自适应，就是可以自动识别屏幕宽度、并做出相应调整的网页设计。目前这种设计已经出现在越来越多的国内网站上，目前Google已经明确表明鼓励响应式网页设计。

(图一，响应式网页设计)

通常在浏览网页时，手机上和电脑上无法显示同一个网页，这也导致许多网页设计会自动转到特定的链接上，如上图所示，无论在PC端还是移动端，网页的显示其实都是一个版本，会随着屏幕的大小网页而改变。

下面是一些例子：

(图二：响应式网页设计例子)

(图三：迪士尼公司的网页)

使用自适应网页设计有5个好处：

1， 随着移动设备越来越多，可以提升用户体验。

2， 该设计没有网页版本区分，所以SEO的策略保持一致。

3， 可以避免重复内容，专心维护这一个网页。

4， 保持网页的原有链接。

5， Google也建议优先采用响应式设计，因为无论是什么网页版本都是相同的HTML、相同的内容，Google最容易处理。

响应式网页设计对SEO是友好的，这些相关技术还在不断演化中，还有许多尚待客服的地方。下面来说说它的缺陷：

1， 对老版本IE支持不好，这是一个致命的问题，尤其是IE6，如果你的网站用户大多还采用老版本的IE的话(建议在统计工具里看一下)，就不适合做响应式网页设计了。

其实我一直想采用响应式网页设计，但看到统计里的老版本IE用户依然很多，只好放弃。

2， 例如一些小游戏站、视频站，如果仅仅是网页采用了响应式设计，但里面的内容依然是只能在PC端打开的话，这时候就要认真考虑了。

国外copyblogger的博客提到了一个很特别的案例，就是迪士尼公司的网页。他说在迪士尼网页中有许多给小朋友玩的网页游戏，有些游戏可以在桌上型电脑玩，但是如果使用移动设备就可以无法使用。因此这个情况下，就必须做出抉择，放弃使用Responsive Web Design，或是修改游戏。

写在最后：

从今年开始，响应式网页设计逐渐流行开来，虽然很热门，但是并没有太多网站采用这类的设计方式。