我的一些关于web标准的思考笔记(一)

所属分类: 网络编程 / CSS/HTML 阅读数: 1224
收藏 0 赞 0 分享
我是从去年初开始学习web标准的,两年下来也有些心得。最近跳槽了正好闲在家里,写一些出来和大家交流一下。

1 对于web标准和W3C XHTML规范的理解

按照习惯的理解,这两个概念似乎都是指的一个东西(就是咱们在这个版里讨论的这些个"高深理论“^_^)。但我认为,事实上从技术的角度上讲,这两个事物几乎没有任何相关性。web标准简而言之就是将页面的结构、表现和行为各自独立实现,更通俗的讲就是如今招聘时流行的语言”div+css"。但W3C XHTML的任何一个版本都没有对web标准理念作限制。很显然的,我们可以用xhtml 1.1写出一个table定位的网页。说到这里,或许会认为我讲了一堆废话。但任何一项技术,只有当你对基础概念有足够清晰的认识的时候,你才会正确的使用它。我从下面两个方面,来谈谈如今Web标准应用走向的两个歧途:

第一种情况很简单。自以为只要使用了XHTML+CSS就是Web标准了。页面里面遍地是class和id。肆意的为每个细节都单独定义class。这样的页面和传统的html的区别就是img标签里多了个"/"。事实上这样子还不如回到传统的html,至少我可以轻松的使用font,而不用总是跟查字典一样去查样式表。另一种更隐蔽的随意使用CSS的我在以后讲。

第二种情况我觉得比较难理解一些,即试图用各种纷繁复杂的div嵌套和css语句来实现你所想要的表现。很简单的一个例子就在我刚看到的一个帖子" 不用切图的页面圆角"。首先我想肯定的是这个创意确实很不错,使用CSS功能将圆角“画”出来。为此,设计者必须在相应的位置加上一大段如下的代码:

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

但是,这里严重违反了Web标准的基本概念——结构与表现要分离。因为它将用于控制网页表现的代码放在结构文档中了。或许你会说它事实上还是将真正的表现代码放在CSS里的。但我认为这是一个偷换概念。因为以上这些b标签跟网页结构无关,它们都是一些空标签。也就是说,它的存在并不是为了将某些内容放在文档结构需要的位置。因此它们对于文档结构来说只是一些废代码。

另外一个例子可能更加隐蔽。之前我有在alistapart.com上看到过如何实现网页三通栏的文章,其原理大概就是使用三四个div相互嵌套。我认为这也是一个违反Web标准思想的做法。因为这些div标签在代码中摆放的次序已经不单纯是为了结构的需要,而是用于网页的表现。

当然,我承认,以上的观点在一定程度是钻牛角尖(但反过来说,非要实现非图片圆角不也是在钻牛角尖么,呵呵)。有些时候结构和表现并不是那么轻易的就能分开的,我们为了实现一些丰富的表现不得不让结构去迁就(想想<div style="clear:both" />的用处)。但是知道什么是对什么是错是很重要的。即使我们有时候不得不做一些错事。

最后,我想声明的是,我并不是"非图片圆角"是无意义或是错误的。我也很佩服作者的聪明和灵感。我觉得这样的技术研究就如同以前用CSS画国旗一样,对CSS技术的熟练掌握很有帮助。但是,它的用途也应该仅和CSS国旗一样局限,不应该在实际应用中采纳。因为它违反Web标准的基本原则。
更多精彩内容其他人还在看

简单明了带你了解CSS Modules

不要误会,CSS Modules可不是在说“css模块化”这个好像在某些地方见过的词,它其实是特指一种近期才出现的技术手段。什么技术手段呢?下面小编来和大家一起学习一下
收藏 0 赞 0 分享

新手学习css优先级

大部分人同样也会在写css的过程中产生很多困惑,比如为什么自己写的某段css没有生效,或者呈现出的样式和预计的不同,但又不知道要如何解决。下面小编来和大家一起学习CSS的优先级
收藏 0 赞 0 分享

css进阶学习 选择符

css这种没有程序逻辑的代码中,又能找出什么来说明谁做得更出色呢?下面小编给大家说明如何从css选择符的角度来提高css代码质量。
收藏 0 赞 0 分享

实现css文字垂直居中的8种方法

CSS可以轻易实现文字的水平居中,但有时我们需要文字垂直居中,除了表格可以实现这种CSS文字垂直居中以外,还有其它几种方法可以做到
收藏 0 赞 0 分享

完美实现CSS垂直居中的11种方法

在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的
收藏 0 赞 0 分享

webpack高级配置与优化详解

这篇文章主要介绍了webpack高级配置与优化,其中包括了webpack打包多页面,webpack跨域问题等相关内容
收藏 0 赞 0 分享

5个HTML5的常用本地存储方式详解与介绍

在HTML5规范之前,存储主要是用cookies,但cookies缺点有在请求头上带着数据,大小是4k之内,今天为大家介绍一下H5的5种存储方式
收藏 0 赞 0 分享

CSS代码检查工具stylelint的使用方法详解

stylelint是一个强大的现代CSS检测器,可以让开发者在样式表中遵循一致的约定和避免错误。本文将详细介绍CSS代码检查工具stylelint
收藏 0 赞 0 分享

Zen Coding css,html缩写替换大观 快速写出html,css

本文是在zen使用生产中遇到的问题做一些分享。
收藏 0 赞 0 分享

javascript代码规范小结

javascript代码规范,大家可以参考下,以便写出更利于阅读的代码。
收藏 0 赞 0 分享
查看更多