搜索
WEB标准教程一、什么是WEB标准？WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（EuropeanComputerManufacturersAssociation）的ECMAScript标准。我们来简单了解一下这些标准：1．结构标准语言（1）XMLXML是TheExtensibleMarkupLanguage(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。（2）XHTMLXHTML是TheExtensibleHyperTextMarkupLanguage可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。2.表现标准语言CSS是CascadingStyleSheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。3.行为标准（1）DOMDOM是DocumentObjectModel文档对象模型的缩写。根据W3CDOM规范（），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。(2)ECMAScriptECMAScript是ECMA(EuropeanComputerManufacturersAssociation)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript262（）。二、为什么要建立网站标准我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的浏览器大战，为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。如何解决这些问题呢？有识之士早已开始思考，需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司(Netscape、Microsoft等)也终于认识到统一标准的好处，因此在W3C（W3C.org）的组织下，网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网站标准组织（webstandards.org）的督促下推广执行。网站标准的目的就是：提供最多利益给最多的网站用户确保任何网站文挡都能够长期有效简化代码、降低建设成本让网站更容易使用，能适应更多不同用户和更多网路设备当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。对于网站设计和开发人员来说，遵循网站标准就是使用标准；对于你的网站用户来说，网站标准就是最佳体验。采用网站标准的好处对网站浏览者的好处：文件下载与页面显示速度更快；内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）用户能够通过样式选择定制自己的表现界面所有页面都能提供适于打印的版本对网站所有者的好处：更少的代码和组件，容易维护带宽要求降低（代码更简洁），成本降低。举个例子：当ESPN.com使用CSS改版后，每天节约超过两兆字节（terabytes）的带宽。更容易被搜寻引擎搜索到改版方便，不需要变动页面内容提供打印版本而不需要复制内容提高网站易用性。在美国，有严格的法律条款（Section508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。三、调试web标准页面的浏览器MozillaFirefox基本信息软件名称：MoaillaFirefox开发者主页：软件大小：4.72MB安装环境：各操作系统均有相应版本版本：0.91软件说明安全、简单、小巧、免费、支持web标准，是这款新浏览器的特点。Firefox是Mozilla浏览器的一个精简版本，速度极快，没有包含电子邮件、编辑器等一些额外的组件。基于Gecko引擎，很小巧，只有4.72Mb，远小于IE，对中文支持也不错。获得MAXIMUMPC2004年软件大奖第一名等多项大奖，被视做IE的替代产品。官方主页下载(windows精简版4.72MB免费)四、初学者12天入门WEB标准第1天:选择什么样的DOCTYPE开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。什么是DOCTYPE上面这些代码我们称做DOCTYPE声明。DOCTYPE是documenttype(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。HTML提供了一种DTD声明，XHTML1.0提供了三种DTD声明可供选择：宽松的,不精确的(loose)!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如br。完整代码如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN第2天:什么是名字空间DOCTYPE声明好以后，接下来的代码是：htmlxmlns==gb2312通常我们HTML4.0的代码只是html，这里的xmlns是什么呢？这个xmlns是XHTMLnamespace的缩写，叫做名字空间声明。名字空间是什么作用呢？由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML采用名字空间声明，允许你通过一个网址指向来识别你的标识。XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是。如果你还不太理解也不要紧，目前阶段我们只要照抄代码就可以了。后面的lang=gb2312,指定你的文档用简体中文。第3天:定义语言编码第三步是定义你的语言编码，类似这样：metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。通常这样定义就可以了。但是要补充说明的是，XML文档并不是这样定义语言编码的，XML的定义方式如下：?xmlversion=1.0encoding=gb2312?你在Macromedia.com的首页代码第一行就可以看见类似的语句，这也是W3C推荐使用的定义方法。那为什么我们不直接采用这种方法呢？原因是一些浏览器对标准的支持不完善，不能正确理解这样的定义方法，比如IE6/windows。所以在目前过渡方案下，我们依然推荐使用meta方式。当然，你可以两种方法都写。看本站源代码，你会发现语言编码定义的地方还多一句：metahttp-equiv=Content-Languagecontent=gb2312/这是针对老版本浏览器写的，以保证各种浏览器都能正确解释页面。注意：在上面声明语句的最后，你看到有一个斜杠/，这和我们以前的HTML4.0的代码写法不同。原因是XHTML语法规则要求所有的标识都必须有开始和结束。例如body和/body、p和/p等，对于不成对的标识，要求在标识最后加一个空格，然后跟一个/。例如br写成br/、img写成img/，加空格的原因是避免代码连在一起浏览器不识别。第4天:调用样式表用web标准设计网站，过渡的方法主要是采用XHTML+CSS，css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS，如果你以前不常用，那么现在就开始学习吧。要制作符合web标准的网站，不懂CSS是设计不出漂亮的页面的。事实上，所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局，现在要改用DIV