您现在的位置: 365建站网 > 365学习 > 前台开发从头说起:关于web标准化

前台开发从头说起:关于web标准化

文章来源:365jz.com     点击数:260    更新时间:2009-12-17 23:17   参与评论

虽然CSS在表现方面天生具有很多优势,但是如果不是web标准化的盛行,估计CSS不会达到今天这样的热门。所以要说CSS,肯定要从web标准化说起。实际上,对CSS的理解越深,才能越好地理解和使用CSS。

很多人对于web标准化的理解就是“DIV+CSS”,或者“IE、FF、Chrome、Opera、Safari测试无错”,或者就是“通过w3c校验”。实际上,这些都只是web标准化以后附带的一些好处或者说一些表现。web标准化的精髓并不是为了抛弃表格,或者浏览器兼容,或者通过w3c校验。有时候,标准化了的网页未必一定能达到上述这些特征。

 

web标准化的精髓或者说本质到底是什么呢?其实很简单,就是“结构、表现、行为分离”。这句话看起来简单,但是真的实现起来,就不那么容易了。分离,分离到什么程度算是标准?分离的目的是什么?举例来说吧。

既然要分离,那么耦合度当然是越低越好。

以样式为例。我们可以把所有的样式都放到外部CSS文件中,那么,CSS规则如何影响你的页面元素呢?有时候用到ID,有时候用到class。如果你的页面充满了ID和class,那么实际上分离得就不怎么彻底,因为你的页面上仍然有大量的ID或者class实际上是为了样式表现而存在的,他们并不是文档结构本身的要求。所以现在有“class hell”的说法。就是为了完全由外部css对页面实现精确控制,而在页面文档中加入大量,甚至过多的class。

再以行为为例。很多时候我们需要和用户交互,于是要给页面上的元素添加“onclick”,“onchange”,“onmouSEOver”等属性,这些属性编写在页面文档中,依赖于外部JavaScript。一旦外部的javascript被拿走,页面就出现执行脚本错误,甚至完全不能正常阅读。在这种情况下,javascript实际上和xHTML就没有能够解除耦合。

实际上,由于只有XHTML、css、javascript三者存在,我们不可能在网页开发中引入“面向接口编程”之类的设计模式。那么,我们所谓的彻底分离,其实从三者分离的最根本目的来说,就是要实现xhtml对另外两者不依赖。即使去除了所有的css和javascript,xhtml本身也能很好地完成自己的职责——文档结构。而css和javascript呢?依赖于xhtml是必然的。

如此一来,如何解除耦合呢?其实答案就呼之欲出了。那就是尽量避免和文档结构无关的元素嵌套,尽量去除class和事件属性。比如:

<ul>
    <li><a href="#">国内新闻</a></li>
    <li><a href="#">国际新闻</a></li>
    <li><a href="#">财经新闻</a></li>
    <li><a href="#">体育新闻</a></li>
</ul>

这样一段源代码,从文档结构的角度来理解,它就是一组彼此关联,没有先后和主次之分的列表,可以理解为列表,也可以理解为目录。

但是在css的作用下,它可以变成菜单、导航条等各种形式,如果css和javascript相结合起来,它还可以变成滑动门、三态菜单等。在这种情况下,css负责表现,javascript负责行为,而xhtml并没有因为css想实现什么样式或者javascript想实现什么交互行为而改变自己。不管css和javascript想做什么,都跟它没关系。那么实际上就真正达到了我们“彻底分离”的目的。保证了文档结构的纯粹性。这就是web标准的思维模式。

随之而来的好处,那就是页面的兼容性,不管在什么样的浏览器里,这段xhtml都是合法有效的。w3c校验也不会有任何问题。并且SEO也会非常好。因为搜索引擎想要的并不是class或者onmouseover,搜索引擎想要的只不过是链接地址和链接文字。

那么,没有class,怎么实现样式呢?没有onmouseover或者onclick,怎么实现javascript事件呢?这就需要网页开发人员的css功力和javascript功力了。

所以,越是标准化,对css和javascript的技术要求越高。反过来,css的能力达不到,或者javascript的能力达不到,那就需要借助于class(id和文档结构有关,不算在这里,后面我们再谈)、借助于onmouseover或者onclick这些与结构无关的属性来帮助实现样式或者行为。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (260人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------