四有新人

十 31

Wang Wen HaoWeb开发 HTML 1 Comment

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。

W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。

那么浏览器究竟该采用哪种模式渲染呢？这就引出的DTD，既是网页的头部声明，浏览器会通过识别DTD而采用相对应的渲染模式：

1. 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。
2. 对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考。
3. 对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析
4. 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
5. 可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。
6. 在ie6中，如果在doctype声明前有一个xml声明(比如:)，则采用quirks mode解析。这条规则在ie7中已经移除了。

Quirks mode和Standars mode最大的不同就是提现在对盒模式的解释上，这也是我们在js里要注意的地方。

什么是盒模式？ 这是针对块级元素说的，说白了就是把块级元素想像成一个装东西的盒子，而margin,padding,border,width这些css属性构成了盒模式。

在Standars mode中：

元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

在Quirks mode中：

width则是元素的实际宽度，内容宽度 = width – (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

1. 内联元素 ，例如<a>|<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。
2. 内联元素（display: inline） 内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如<a>|<em>|<span>等都为内联元素。内联元素可以为任何其他元素的子元素。
3. 浮动元素（无论左或者右浮动）边界不压缩 ，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。
4. 如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0% ，因此不会被显示，此点在采取层布局的时候需特别注意。
5. 边界值可为负，其显示效果各浏览器可能不相同。
6. 填充值不可为负。
7. 边框默认的样式（border-style）为不显示（none）。

在js中如何判断当前浏览器正在以何种方式解析？

document对象有个属性compatMode ,它有两个值：

BackCompat 对应quirks mode

CSS1Compat 对应strict mode

各浏览器的兼容性表，可以查看PPK的网站。

七 08

Wang Wen HaoWeb开发 HTML, html5 No Comments

利用web技术进行应用开发的趋势已深入人心，甚至web浏览器以外亦是如此。最近披露Windows 8将会为编写运用HTML 5技术的应用提供支持只不过是契合了其在开发界的转变而已。因此问题是：你打算如何应对？

如果你没有在一直地密切跟踪，很容易就会做出这样的猜测，为什么突然之间Web技术会扮演桌面应用开发平台的角色。在正在定稿的HTML5标准里面，添加了一些新的项目，这些项目为HTML目前的文档格式附加上了真正的应用开发能力。过去，庞大的JavaScript框架及浏览器插件是某些相当琐碎的功能之所需。

HTML5依靠添加对视频流、多线程以及异步处理（通过“Web Workers”消息传递系统）、利用套接字直接通信等的支持来改变这场游戏。尽管一个文档格式标准拥有这些能力会吓到某些人（包括我本人在内），但是车轮滚滚，这仍是HTML 5的前进方向，而且它还有苹果、微软、谷歌、Mozilla、Adobe等公司给它撑腰。此外，各种不同的框架的存在让它能够轻易地将Web应用直接与后台的Web服务连接起来。其结果是，对于许多任务来说，HTML 5现在跟Silverlight、Flash、Flex/AIR以及JavaFX等技术一样出色（尽管在某些事情上那些仍做得更好）。

以下就是你希望学习来步入此门槛的技术：

HTML5： 尽管HTML5作为标准可能尚未完全确定，但是到了这个阶段变动不会太大了。目前，它已经是可用的，并在相当一些浏览器上有了实现。你现在可以开始学习它了。

CSS： 如果你对CSS还不熟悉，现在正是学习它的大好时机。浏览器支持还在不断完善，且现在IE6在市场的份额已经很少，对此开发人员已经觉得可以放心地忽略不计。

Web services： 每一种主流的服务器端开发语言都拥有一个框架或一套库，以便容易地生成web服务，如.NET中的Windows Communication Foundation （WCF）。理解这些基础应该不需要花费太多的学习精力。你也许特别希望学会如何生成JSON的输出，此物正在迅速变成Web应用的通用语。还有，确保你理解了RESTful Web服务。在现代的开发环境下，相对于SOAP来说，尽管它们可能需要花费更多的功夫，但是其可访问性可用性也要高得多。

JavaScript： 相对于传统的ASP.NET或类似开发需求来说，新的应用开发范式需要多一点JavaScript方面的知识。

jQuery： jQuery已经成为可用的客户端开发框架；它似乎可用包办一切。在利用一组扩展的插件的情况下，如果你想玩点UI的花样，很可能jQuery能帮你忙。

这些技术现在构成了若干不同的开发系统的基础。移动网站就是一条好的途径，靠它可用最少的功夫来达到最多的移动用户。像Appcelerator的Titanium那样的工具允许你在若干平台上（包括桌面和移动）在其系统之内使用web技术。其他的系统，像OutSystem的Agile Platform打包了像jQuery这样的库，使得开发桌面或移动web应用变得极其简单。Windows 8，尽管细节仍很含糊，看起来似乎会拿IE9（或彼时的当前版本）作为HTML 5的运行环境，来充当脱离明显的浏览器窗口之外的本地应用。可以推断，这些应用会拥有增强的特权来访问本地资源，也可能其行为会更像是本地应用。

自学上述核心技术可谓聪明的一步，今年9月微软的BUILD大会举办过后，我们就应该了解到该公司Windoes 8的策略调整计划，并能发现还有哪些东西需要我们去学。

六 23

Wang Wen Hao互联网, 我的工作 CSS, HTML, JavaScript, Web No Comments

Web 开发的分散性和交互性，决定了 Web 开发必须遵从一定的开发规范和技术约定，只有每个开发人员都按照一个共同的规范去设计、沟通、开发、测试、部署，才能保证整个开发团队协调一致的工作，从而提高开发工作效率，提升工程项目质量。

一、基本规范：

页面一定要有相应的Title，特殊页面可以不要；如Iframe页、Include页等

主要页面要有meta字段以便于搜索引擎查找，还可充当注释作用

尽量使用广泛支持的技术。以流行的浏览器及版本为标准，同时照顾低版本

不使用过小的字体不使用过大的图片、动画、声音、不使用过长的滚屏

及时删除无用文件，防止无谓的下载速度减慢、后期维护简洁明了

所有文件全部以小写字母命名，包括图形文件。禁止用中文作文件名

页面支持最低800X600屏幕分辨率（实际尺寸为778*434px），即不能出现横向滚动条

通常情况下页面应以居中为主，如有特殊要求可以设置居顶、居左

图片采用gif, jpg压缩格式，以减小页面下载数据量，<img alt="" />标记要有width,height属性

所有页面都需要定义背景颜色，系统默认值是可以被用户随意更改的

二、文件命名与目录结构规则

首页面必须是以index.htm 、index.jsp命名的文件，按目录划分

HTML文件扩展文件名一律用 .htm，不要同.html扩展名混用

除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主。尽量用一些大家都能看懂的词汇。

目录下新建css文件夹，专门用来存放本级目录的全局CSS样式文件

目录下新建image文件夹，专门用来存放本级目录的全局图片资源，如gif、jpg

目录下新建script文件夹，专门用来存放本级目录的全局脚本程序代码，如js、vbs

目录下新建media文件夹，专门用来存放本级目录的全局媒体文件，如flash、avi

目录下新建temp文件夹，专门用来存放本级目录的临时或测试资源文件

根目录下一般只存放index页面及其所包含的帧页面与一些公共页面，如error、wait

所有文件与目录尽量符合DOS系统8/3文件格式命名，即8字节文件名、3字节扩展名

三、表格嵌套布局规范

在排布表格之前,请大家一定要好好思考一个最佳的方案,表格的嵌套尽量控制在三层以内,并且应该尽量避免 两个标记,经验表明,这两个标记会带来许多麻烦。

一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。如果必须这样做,请使用<tbody>标记,以便能够使这个大表格分块显示。

排版中我们经常会遇到需要进行首行缩进的处理,不要使用 或者全角空格来达到效果,规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上<p>标记,注意,一般情况下,请不要省略</p>结束标记 。

原则上,禁止用 <img alt=”" width=”?” height=”?” /> 来人为干预图片显示的尺寸,而且建议 <img alt=”" /> 标签中不要带上 width 和 height 两个属性,这是因为制作过程中,图片往往需要反复的修改,这样可以避免人为干预图片显示的尺寸,尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时,不会留出图片的站位大小,可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的,不会有这个现象）,尤其是当图片的尺寸较大时,这种现象会很明显,所以当预料到这种会明显导致网页抖动的情况会发生时,请大家务必在最后给 <img alt=”" /> 附上 width 和 height 属性。

为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用<br>来人工干预分段。

不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。

请不要在网页中连续出现多于一个的半角空格, 也尽量少使用全角空格（英文字符集下,全角空格会变成乱码）,空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的 gif 图片来实现。

中英文混排时,我们尽可能的将英文和数字定义为 verdana 和 arial 两种字体。

行距建议用百分比来定义,常用的两个行距的值是 line-height:120%/150%

网站中的路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,如我们不必这样：<a href=”aboutus/index.htm”> 而应该这样：<a href=”aboutus/”></a>

四、Web标准设计规范（XHTML+CSS）

为页面添加正确的DOCTYPE，过渡型（Transitional）、严格型（Strict）、框架型（Frameset）

设定名字空间（Namespace）

声明编码语言

用小写字母书写所有的标签元素与属性名字

为图片添加 alt 属性

给所有属性值加引号””

关闭所有的标签，包括空标签

用CSS定义元素外观

用结构化元素代替无意义的垃圾代码

给每个表格和表单加上id

所有的XML标记都必须合理嵌套

把所有<>和&特殊符号用编码表示； &lt; &gt; &amp;等

给所有属性赋一个值，没有值的就重复本身

不要在注释内容中使用“–”

推荐定义font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;

辅助图片一律用背景处理

尽量多使用群选择器、派生选择器来书写具有层次结构的CSS样式

合理使用类别选择器与id选择器，同个ID只用一个地方，相同CLASS可用多个地方

链接伪类一定要按照a:link、a:visited、a:hover、a: active的顺序书写

多使用具有良好风格的注释，便于今后的维护与重构

HTML编码规范

一个标记必须占用一行 不得出现两个标记在同一行的情况(同一标记的关闭标记除外)

静态文件内容必须包含在标记中间

标记必须包含在标记中间

对于需要关闭的标记，必须同其关闭标记同时出现，不得出现交叉包含的语句

最高一级的父标记采用左对齐顶格方式书写

下一级标记采用左对齐向右缩进一个Tab的方式书写

在下一级依此类推，分别左对齐相对于父标记向右缩进一个Tab的方式书写

同一级标记的首字符上下必须对齐

JavaScript编码规范

变量命名规范

常量以及全局变量名必须全部使用大写字母

变量名首字母必须小写

变量名必须使用其类型的所写字符串开始。各种类型的所写字符串如下：

整型变量：int；长整型变量：lng；浮点型变量：flt；双精度变量：dbl

对象引用变量：obj；字符串变量:str；Date类型变量：dtm

变量名必须采用有意义的单词命名

变量名除首字母小写外，其他单词首字符必须大写

如果变量名过长可以使用单词缩写，除了被广泛了解的单词缩写以外，所有使用单词缩写的变量名必须在定义时给出注释

变量使用规范

变量使用前必须定义。没有定义的变量禁止使用

变量的使用尽量缩小到小的作用域

对象命名规范

text输入框：txt button按钮：btn select下拉选择框：sel option项：opt

form表单：frm frame框架：fra hidden表单项：hdn div标记：div

span标记：span 对话框对象：dlg 窗口对象：win

函数以及子过程命名规范

函数命名必须使用动词＋名词对的方式，并且能够体现函数的功能

函数命名的动词前缀必须是同函数功能相关的完整动词

函数命名第一个单词的首字母小写，后面每一个单词的首字母大写