现今的互联网领域,在用户和web开发者的概念里,WEB标准这个词正在变得越来越时髦。但是,WEB标准的概念过于笼统,人们对WEB标准到底是什么和她所包含的一些东西有着各自不同的看法。在由中国E动网赞助的“E动杯”ShopEx模板大赛论坛上,参赛者和点评者就什么是WEB标准和模板代码的“表现手法”发言踊跃,本文阐述了作者对于WEB标准的观点,以便大家了解通常意义上WEB标准所指代的概念。
并没有所谓的“标准”,有的只是建议
首先,你应该了解实际上并不存在真正的WEB标准,真正存在的是一些推行标准化的组织,就像ISO standards,Ecma。当大多数人提到WEB标准时,他们实际指的是W3C的一些东西。但W3C并不真正制定标准,他们仅是提供建议,以他们自己的话来说:“A W3C Recommendation is a specification or set of guidelines that, after extensive consensus-building, has received the endorsement of W3C Members and the Director. W3C recommends the wide deployment of its Recommendations.”
WEB标准的含义
一般情况下,WEB标准是由以下几个部分组成的,
•有效的HTML/XHTML
•代码语意清晰
•内容(HTML/XHTML)表现(CSS)和交互(Javascript)相分离
对有些人来说,WEB标准意味着以上所有部分,而对于另一些人来说,可能只是其中一点。但最重要的是这三部分是构建一个优秀站点所不可或缺的。
有效的HTML/XHTML
让我们从第一点开始,有效的代码是WEB标准的第一步。对大多数人来说,有效仅意味着HTML/XHTML代码,但不要忘了也有CSS的验证。验证你的HTML/XHTML代码有效性基本上就是指你网页上的代码是否符合你选用的doctype。
选择正确的doctype很重要,它决定了HTML/XHTML代码该如何被解释以及在不同浏览器中布局的差异。经过验证后的代码能够很好的在不同浏览器中显示,而不需要考虑太多浏览器的兼容性。通过验证你可能会发现潜在的影响页面的代码,修正他们以使开发过程更有效率,和降低日后维护的成本。
代码验证工具
•W3C Markup Validation Service
•Firefox HTML Validator add-on
•Internet Explorer Developer Toolbar
代码语意清晰
任何一个存在于页面中的元素都应该有它存在的意义并能准确表意。简单来说就是要根据上下文关系来选择合适的元素。例子如下
这段代码语意不清
以下为引用的内容: <div class="page-heading">Title of the page</div> <a class="menu-item" href="/item-1">Menu item 1</a> |
同样的表现,语意就清晰多了
以下为引用的内容: <h1>Title of the page</h1> <ul class="menu"> |
要使代码语意清晰其实很简单,用h1-h6来定义标题,用p来定义文章段落,用ul,ol等来定义列表项等等。。。这会方便帮助你找到代码中你想要的部分,并能显著减少页面加载时间,因为它减少了代码量。而且,不要忘了,这对于SEO也很有帮助,清晰的语意能帮助Google和其他搜索引擎更好的检索你的站点。
内容(HTML/XHTML)表现(CSS)和交互(Javascript)相分离
有太多理由认定将内容(HTML/XHTML)表现(CSS)和交互(Javascript)相分离是至关重要的。他们有着各自不同的分工,如何合理的应用他们需要经过仔细斟酌。
分离的几大原因
效能:外部文件比如css和js会在第一次加载后保存在用户的缓存里,这就节省了以后的加载时间,提高了体验。
总体:你总能准确的找到代码并放置它们。
可用性:你总能方便的引用代码,并能在整个网站的范围内重用它们。
维护:所有有关表现和交互的代码集中存放,方便维护。
如何更贴近用户?
有人说要使网站变得更加贴近用户需要耗费更多额外时间,但其实只要你能做到文章中提到的三点,你就已经在更加贴近用户的道路上前进了一大步。
正确有效的代码,会使你更方便的发现页面中错误的内容。语意清晰的代码能更好的支持手持设备,也能使网站在没有CSS修饰的情况下更好的被用户浏览。而结构表现交互相分离使得网站在缺乏javascript支持的情况下仍能保持基本功能,当然你可以通过增加javascript层来增进站点的体验,但这绝对不是一个网站赖以运作的最基本的部分。