关于web标准化的一些误区

“web标准”这个词最近几年在国内的热火程度就好像钱江潮一样一浪高过一浪,随着雅虎、MSN以及国内各大门户网站纷纷抛弃表格布局,现在的网页,要是还没有使用div+css布局,那别人一看就首先从心底鄙视起来。

但是作为一直在web开发这个领域混迹的开发人员,我从网上的文章,还有周围人的讨论中发现,很多人都把“web标准”和“div+css”完全弄混了。包括现在热卖的一些书也是这样,通篇都是“div+css”布局。严重一点的,那更是“万般皆div”。

“div+css”布局,作为web标准的一个重要部分,也是对web标准下网页布局的一个最直观布局,但是我们不应该顾名思义,以为web标准就是“div+css”布局,最后的结果就是,虽然完全抛弃了table,但是网页结构却离标准十万八千里。

web标准的本质是“结构、表现、行为”的彻底分离。在进行了多年的标准化实践以后,我越来越体会到应用web标准以后的种种好处。打开一个网页的源代码,结构清晰,标签应用准确,看到<hx>就知道这是标题,看到<p>就知道这是段落。去掉css以后,一个类似word文档的结构清晰的文件就呈现在页面上。

只有这样的网页,才能真正体现web标准化的优点。web标准化的优点主要是什么呢?加载速度快、易于维护、搜索引擎友好、减少带宽占用、利于团队分工合作……很多。采用div+css布局,做得好的话,也只不过是能够减小文件大小,提高加载速度,易于维护而已。有的文章里说“采用div+css”布局的页面更容易被搜索引擎索引,或者说“google更喜欢div+css”,这就是误区了。google喜欢的不是采用div布局或者table布局的页面,而是喜欢结构清晰良好的页面。比如一个导航条,如果采用table布局、采用flash实现、采用图片按钮等,那么google不能识别出这是对于网站来说很重要的导航条。而如果采用div布局,可以去掉很多不必要的table\tr标签,从而让对搜索引擎真正有用的两个内容——链接地址、标题更加突出。但是,只有真正符合web标准的结构,才能彻底剥离掉html代码里面的css和javascript。比如:

<a href="index.html" title="首页" onmouseover="highLight(this)"
 style="font-weight:bold;color:red">返回首页</a>

这样一段代码,其中对搜索引擎有用的只不过是“index.html”和“首页”罢了。符合web标准的html应该是这样:

<a href="index.html" title="首页">返回首页</a>

css怎么办呢?放到外部css文件里去,鼠标滑过的效果呢?放到外部js里去,为网页元素附加事件,这属于行为,应该是javascript的职责范围。不应该放到文档结构里。

刚才是一个结构表现行为混合的反面例子,除了三块不分开以外,现在网上流传很广的很多div+css布局的页面还存在另外一个问题,就是html标签使用不合理,虽然使用了div+css布局,但是html丝毫不能体现页面结构。比如:

<div id="wrap">
    <div id="head">
        <div id="logo">
            <img src="logo.gif" border="0" width="250" height="60" />
        </div>
    </div>
</div>

像这样的例子,现在互联网上遍地都是,做成这样,你可以说你抛弃了表格,采用了div+css布局,但是这样的div布局,有什么意义呢?除了抛弃表格赶了现在的时髦以外。这里的这张图是网站的标识,也就是说,搜索引擎来到这里,应该得到的是网站的名称之类的信息。那么结构合理的站点怎么做的呢?

<div id="wrap">
    <div id="head">
        <h1>网站名称</h1>
    </div>
</div>

作为网站标题,也就是一本书的书名,一篇文章的标题,在word里面我们一般会设置“标题一”,在现阶段的HTML规范里,那就对应着一级标题<h1>,所以这里理所当然使用每个页面都应该有且仅有一个的<h1>。

可是设计图里这个地方不显示网站的标题而是现实网站的LOGO,怎么办呢?这就不属于文档结构的问题,而是页面表现的问题了,应该是css的职责。实现起来其实也不难:

h1 {background:(logo.gif) no-repeat;width:250px;height:60px;text-indent:-9999px;}

在web标准中,文档结构是首要问题,你的HTML应该体现你的网页的文档结构和层次,从每个部分的先后、重要程度、主次程度出发,考虑是段落还是标题?是列表还是引用?从而使用对应的标签。而不是为了实现设计样式,把重要的放下面,把标题改成图片。当然其中最失败的,就是到处都是div。

HTML中提供了那么多的标签,本意就是每个标签对应文档的不同部分,每个标签有各自的用途和意义。如果一切都从布局需要出发,只要是要应用样式的就来个div,那HTML还有什么意义?只需要<html>、<head>、<body>加上<div>、<a>就够了。还要<ul>、<ol>、<dl>、<p>、<quote>这些干什么呢?

最后还有一个误区,那就是——div+css布局才是标准化,用了table就是不标准。w3c从来没有说过table是不推荐使用的标签,更没有说过web标准要求禁止table。table的作用,是呈现数据,结构化的数据,在数据库中是怎么存储的?当然是以数据表的形式。那么这些数据要呈现到页面上,同样大部分时候仍然是以表格形式。在这个时候,就应该使用表格,使用table。

在web标准刚刚热火起来的时候,主要是针对大家已经使用多年形成依赖的table布局和table嵌套而把用div进行网页块划分和用table进行网页块划分的两种页面布局方式进行比较,从而才出现了“div布局”和“table布局”的概念。实际上,比这种叫法更准确的,应该是“css布局”和“html布局”。

一律使用div不是标准,标准也从来不禁用table。div只是web标准中用来实现网页布局的重要标签,实际上没有任何效果是必须依赖div的。所有的效果都是由css实现的,不管是div还是p,css都能让他们呈现出同样的效果。而table呢?应该回归到它本来的作用——呈现表格形式的数据。

我以前一直认为这只是网络上网页设计自学者和一些网页设计网站混淆了概念,搞错了重点。但是当我回到高校,从事电子商务开发方面的教学时,我才发现,问题已经蔓延到了高校教材、课堂教学中了。

现在其实有很多网页设计师,UI工程师和程序员都很努力地致力于web标准的推广。我想说的是,希望大家在传播web标准理念的时候,不要光顾技术细节、技巧方面的问题了,而忽略了web标准的本质——先进的设计模式和开发理念。

               

关于web标准化的一些误区》上有5条评论

  1. 小李刀刀 文章作者

    忌夏日 :

    赞同,画表格使用table比使用div更加简单有效。

    关键是“结构、样式、行为”的分离,是“语义化的文档”,用什么,应该是由结构决定,而不是取决于哪个容易哪个难。

  2. zjwjuve

    说的很好很详细。太难得了,今天才进来看见,以后多来,呵呵

评论已关闭。