古老的山谷中村民生活简单而富足,山谷中有个陡峭的山岩,传说山岩那边有着肥美的牧场,山岩下有累累白骨,那是企图攀越山岩,去寻找传说中的牧场的人的尸骨,于是人们制定了律法,禁止攀越山岩,禁止谈论和寻找传说的牧场,声称那是神的牧场,这些律法由守旧老人维护着。一天夜里一个浑身是伤的人步履蹒跚的回到村里,他告诉村民们,他找到了传说中的牧场并希望村民跟随前往。但守旧老人的威严和律法的神圣压制了村民的躁动,漂泊者也被处死。一天灾难降临山谷。尽管守旧老人试图维护受到越来越多的村民的求生欲望挑战的律法。但暴动还是发生,越来越多村民离开了死寂的村庄,老人们咒骂着拦住了最后一辆离开的马车。沿着漂泊者留下的路标村民们找到新的牧场。怀着感恩之心,后人把漂泊者奉为先知,尽管他早已尸骨无存。
-- 摘自房龙《宽容·序言》
■ 宽容 - WEB客户端表现层技术的W3C标准
也许Tim Berners-Lee在工作间创建WEB构架时不会想到,他的图形化WEB浏览器小玩意在短短二十几年内,造就出GOOGLE之类的商业庞然大物,推出杨致远、李开复们时势英雄,演义一出又一出的动人故事。他的本意只有一个:信息交换。
以文本编码文件为载体的WEB技术,打通全世界计算机网络互联的任督二脉,实现信息交换所需的分发、获取和利用等环节。它用超文本技术(HTML)实现信息与信息的连接;用统一资源定位技术(URL)实现全球信息的精确定位;用新的应用层协议(HTTP)实现分布式的信息共享。
尽管简单朴素的几十个HTML标签已经可以完成客户端技术的根本任务--展现从服务器转来的文本信息内容和非线性信息关联,但人们需要更丰富的多媒体信息,于是GIF被用以存储展现二维图像;RealPlayer与Media Player以插件形式实现音频与视频应用;Flash提供了优秀的互动表现技术。
随着商业力量不断地渗透,它们在推动技术进步的同时,你死我活的拼争也造就对Tim Berners-Lee最大的嘲讽--方便信息交换的技术本身互相不兼容,画地为牢。这往往意味着老妈妈可能被迫知道浏览器除了FireFox还有IE;被迫让有限的带宽接收膨胀几十倍的垃圾HTML页面;被迫理解复杂的JavaScript和Cookies概念;被迫强制安装和防范各种各样流氓插件,欲望让Berners-Lee纯静的思想变成混浊的现实。 贪得无厌的商业力量往往需要行业非赢利组织来制衡,在WEB业界这股力量叫W3C(World Wide Web Consortium),它针对WEB客户端技术提出了一系列的标准。所谓的Web标准是指结构化的页面描述语言(如XHTML和XML),解释性语言(如CSS),对象模型(DOM)和脚本语言(如ECMAScript)。
W3C标准的根本出发点也就是WEB系统工程师的梦想--宽容,其技术力图实现:宽容程序员,方便制作与维护;宽容浏览器,支持多浏览器并实现统一的页面控制、定位与排版;宽容服务器和带宽,精简和压缩代码;宽容客户端设备,支持多操作系统和非传统的客户端设备复杂交互行为;宽容各种高级发布流程,如方便搜索等;宽容未来技术,让网站活得更久。
而值得庆幸的是从传统的HTML到W3C标准的转变并不算太复杂,WEB标准的核心思想是把网页分离成三个独立部份:结构、表现和行为。结构描述内容;表现用于排版;行为实现行为交互。但需要清醒地意识到即使有W3C标准WEB也成不了乌托邦,商业力量对规则的主导诉求无时不在,如据传MS的IE最新7.0版本不完全支持W3C标准。这种主导诉求给这个世界带来灵动和鲜活的同时,也在践踏和破坏着标准。真苦了网站开发人员,或许他们要使用大量的程序分支来实现宽容的梦想,但更让人哭笑不得的是,随着WEB环境的变化,苦心积虑设计出的兼容技术往往多余甚至变成BUG。
■ 千变女郎 - XHTML+CSS
HTML是构造页面的基本语言,由固定数量的标签和松散规则组成,即可描述信息内容,又可对其进行排版和修饰,简单易学。但如果你时常要从其它网页中提取信息(如搜索引擎的页面分类索引),就会发现从HTML骨子里发散出来的松散气味会让人多么烦躁, HTML页面几乎成了文件转换的黑洞--易进难出!
与HTML同样脱胎于SGML的XML(eXtensible Markup Language)就这样受到关注。单一通用文件格式、自描述、易扩展、数据一致性和自动转换五个特点使之成为异构系统间数据交换的合适载体,我们已经可以在WEB中看到其身影,如RSS阅读器,FLASH等,但全球现有的80G HTML页面不可能在一夜之间一蹴而就成XML,于是出现被Zeldman的《Designing with Web Standards》一书中称之为"温和的、友好的升级方式"的页面描述语言--XHTML。
戴上X帽子的HTML只是对传统的HTML进行适量改造,首先的要义就是遵循XML语法规则书写HTML代码,即:
·以正确的DOCTYPE和名字空间开始
·使用META内容元素声明你的内容编码语言
·用小写字母书写所有元素和属性名称
·给所有属性值加引号
·给所有属件赋一个值
·关闭所有标签
·用空格和斜杠关闭空标签
·不要在注释内容中使用"--"
·确保使用<和&表示小于号和与号
再则如果你仔细分析和规划自己的HTML页面,通常会发现每页都有类似的内容块,如:标志和站点名称、主页面内容、站点导航、子菜单、搜索框、功能区、页脚,其目的相同的块状结构即称为页面结构,或称语义。HTML仅为一格式化语言而无法描述页面结构,所以在XHTML中,通常使用<div>标签来定义这些结构,并为其标识上id。下例为一结构化WEB页实例(注意因受篇幅限制大量定义代码被删除)。
<HTML><body>
<div id="divHeader">范例</div>
<div id="divLogin"><form id="frmLogin">
<p id="lblAassist">请输入用户名和密码:</p>
<li><input id="txtUserName" /></li>
<li><input type="submit" id="btnLogin" /></li>
</form></div>
<div id="divFooter">Copyright 2006 by 老燕</div>
</body></HTML>
至今为止我们还未提到任何有关网页排版的片言刻语,这对许多新手而言不太适应,他们常常先排版后内容。但内容与表现分离是W3C标准的根本要义之一:在HTML中尽量避免甚至是不出现页面排版代码,这些工作留给样式表(Cascading Style Sheets)来完成。
CSS用以给WEB页面女郎化妆(如字体、颜色、空间,未被广泛支持的CSS2甚至支持可视、听力、盲文等装置),一般保存在外部.css文件。外部样式表能让你通过编辑独立的CSS文件来控制多页的样式和布局,你甚至为同一个网站设计多个样式表并动态加载达到千变效果。
CSS的语法并不复杂,其一重要使命是使用CSS布局来替代目前大多网站采用的臃肿的表格排版法,即把所有网页对象都放在盒中,通过控制盒属性完成页面布局设计,盒结构如下图。但令人心烦的,主流的IE6.0和FireFox 1.x对盒模型的细节解释有所不同而可能产生不一致的排版效果,您可以通过若干技巧来回避这个问题,但类似技巧在未来浏览器中或许就是一个BUG。
■ 树 - DOM与ECMAScript
传统的HTML页面的标签们象一群野孩子零散无序,所以W3C采用页面对象模型(Document Object Model)来提供统一的应用程序编程接口。DOM被设计为多层(目前主要用两层):Level 1 包括内核,HTML,和XML 文档模型;Level 2. 包括样式表对象模型,定义了操作附加到文档的样式信息的功能接口。
DOM将HTML或XML文档描绘为一个树形(Tree)数据结构,Tree的每个节点表现为一个HTML标记或者HTML标记内的文本项。树形结构精确地描述HTML文档中标记间以及文本项间的相互关联性。只要修改相关Tree节点都具有的 nodeValue属性值即可操作文档中的任何标签,也可以方便地从页面的任何地方开始,沿着文档的树型结构在上(parent)、下(child)以及一侧方向(sibling)做节点导航。另外,DOM技术允许我们操纵文档的Tree结构,包括创建、删除以及移动节点。
基于DOM的ECMAScript被W3C当着一统江湖的Web脚本语言标准。所谓的脚本语言是内嵌到HTML文件中并由浏览器解释执行以增加互动性和减轻服务器压力,基于对象(Object)和事件驱动(Event Driven)。但JavaScript和Jscript这对同父异母兄弟长期以来一直受到歧视,程序员们笑称它们除了能在网页中加点花花草草外别无特长,尽管程序员们需要花费大量时间来编写表单验证脚本程序,用户却只要在浏览器中点一下即可禁用而绕开验证。更令人抓狂的是各个版本的javascript虽然号称符合标准,但却都貌合神离,程序员们受尽苦头!
尽管近期随着AJAX技术的出现,让javascript老树发出新芽,火了!可是我能放心把网站建立在一个脆弱的基础之上吗?网易的126邮箱最近改版,号称极速,可是关了javascript连邮箱操作界面都出不来,老妈妈能知道里头的缘由吗?很久以前看到这么一句告诫:不要依靠JavaScript,唉,我犹豫,徘徊中……