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