大家都知道，web标准在中国传播初期，人们使用“div+css”描述web标准，似乎有点道理，根据国内网页设计师的编码水平，看似就是使用div配合css来替代table布局。

可是学过一段时间web标准的人士，都知道这是误解，那么有人提出，摒弃div+css的说法，提倡XHTML+CSS的说法，因为要使用两门语言来架构网页，但是这种称呼也不准确，不完整，因为只提到了XHTML1.0标准和CSS2.0（CSS2.1）规范。

其实web标准就是web标准，叫别的都不对，他就是web开发中的一些列标准的集合，XHTML，XML，CSS，DOM，ECMAScript，制定这些标准是为了更好的约束，web运行平台（浏览器）的开发厂商，而我们遵循web标准开发，也是为自己着想，通过大众的努力，迫使流氓开发商，遵循统一标准，降低开发者的难度，让我们的作品能更好的跨平台，跨越浏览器的障碍（IE，FF，Opera等等），跨越设备的障碍（PC，手持设备，手机，打印设备等），跨越用户障碍（色盲，色弱，视力不好，肢体残疾等）。

为什么要遵循web标准进行设计和开发？上一段也已经宏观的提到了，跨平台统一于一个标准，最终降低开发难度。具体实施上肯定没有一个老板这么伟大的投身标准事业，商人总是依照利益的驱动，是哪些利益驱动了他们应用web标准的？

• 更少的代码和组件，容易维护
  
• 带宽要求降低（代码更简洁），成本降低。
  
• 更容易被搜寻引擎搜索到
  
• 改版方便，不需要变动页面内容
  
• 提供打印版本而不需要复制内容
  
• 提高网站易用性。
  

当最终老板看到在应用web标准后的代码很简洁，出现了许多未曾谋面的div，然后你给他展示，可以随意改版，多种设备兼容，多种浏览器兼容，很好，老板很欣赏，这么多的好处，我们全力支持web标准，而导致的结果，web标准技术人才火热，应用web标准开发的项目增多，开发效率成为问题，开发模式还在摸索之中，里面出现了，在web标准应用中的一些错误方法，div的滥用，class的滥用，结构一塌糊涂，人们重视css比重视xhtml多了许多。

div是什么？刚开始人们的认识是无语义，应用无语义的事物来布局，是正确的，既然无语义，div这三个字母就不会出现。

引用:

Jeffrey Zeldman的解释是“用短语division解释div，是最恰当不过的了”。Div和span一样是用作裁减分割文档的，那么他们也就拥有语义了。Div联合id和class属性，提供了一个把结构添加到文档的通用机制。

Div将文档分割成一块一块的，怎么区分这一块块来进行布局呢？也就是怎么给独有的div赋予一个唯一标识ID，通用的div赋予一个class值，也可以在class的基础上再赋一个id。如果不用id看似也可以，全部class，只要合理的命名就可以，你可以为header区域，添加class, <div class="IdHeader"> ，类IdHeader告诉你，这里是唯一的而且是header区域。可是ID是最能体现文档结构的一个属性。当你为ID不能重用而牢骚时，想想ID的强大功能吧！

ID的属性有着令人难以置信的强大功能。ID属性可以完成下列功能：

• 作为一个样式表的选择器，可以让我们创建紧凑的、最小化了的XHTML页面文件。
  
• 最为一个超文本链接的目标anchor，用来替代过时的name属性（或者向前兼容和她共存）
  
• 作为基于DOM的脚本中特殊元素的引用方法。
  
• 作为一个声明的对象元素名字。
  
• 作为通常目的流程处理的工具（W3C的例子中：“当丛HTML页面提取数据倒一恶数据库，或者把HTML文档转化到另外一个格式等，这个实惠用来标明区域”）
  

现在也经常出现组合class的结构，就是拥有一个CSS框架，然后任意组合class实现布局，看似是提高效率的捷径，可是花费的代价却是破坏结构，（当然也有例外，如Grids CSS），一般的做法就像土豆网前台编码的设计

复制内容到剪贴板

代码:

<div class='box_abstract box_program box_border'>

这个维护带来了很大的困难，也就是结构设计的不够合理，只是为了div+css而不是为了web标准。

Web标准的要把握几点：

• Use structural, semantic markup.
  
• Separate presentation from the (X)HTML document using CSS.
  
• Rely on JavaScript as an enhancement for, not a replacement of, website features.
  

• 使用结构化，语义化的标签
  
• 使用CSS分离出（X）HTML文档中的表现元素
  
• 依靠Javascript去增强，而不是替代，网站的特征（具个例子就是如果css做不了的，交给Javascript而不是替代css去做他能做的）
  

对于多样式组合的结构我一直是很反感的，可能我理解的不够深入，体会不到他的好处，或许合理的组合可以兼顾结构和开发效率，可是我没有发现，我就要抵触。

对样式组合方式是这样的

复制内容到剪贴板

代码:

<div class=”class1 class2 … classn”></div>

举个布局例子

复制内容到剪贴板

代码:

<div class=”f-left w400 bgfff”>

几个类组合成一个左浮动，宽400 背景为白色的一个区域
你可能拥有一个庞类库，页面只需要任意的class的组合就可以完成，省去大部分花费在css上的时间，可是带来的是下次结构的混乱，这样做和table布局没什么两样，只是代码看着好看而以，而且代码量相差也不会太大。在应用web标准初期，合理的table布局也是允许的。如此多的class让我想起了table冗长的属性

复制内容到剪贴板

代码:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=100%  HEIGHT=100%>

难道辛辛苦苦就是想使用div配合css模拟出一个table很容易实现的效果？而且达到和table布局一样的拙劣？

语义化也是结构的一个部分，语义除了合理的使用（X）HTML标记语言，id也是一个语义组成的部分，div的id就像一格即时贴，告诉你div的语义，告诉你这个区块的意义。

微格式（Microformat）是在标准 XHTML 代码中嵌入结构化数据的一种新方法。他的诞生也很明确的说明了web的结构永远是第一位，语义化的优势很现实的体现出来，div的属性规划也体现着语义，而不仅仅是一个传递对样式工作的接口。可以去看看ibm文档中心的一篇“使用 microformats 分离数据与格式”了解它的工作原理。

其实说了这么多，我也有点没头绪了。主要就是我对结构和开发效率之间的矛盾的一个说明，css框架如何才能不破环结构的一个疑问。而且对于结构和效率我的观点就是“只有合理的结构，才是你web标准化的根本动机”，web是承载信息的，没有理由为了视觉效果，而破坏合理的结构。

我没看懂主要是说明什么

是不是说 不要滥用下面这样的组合结构，而导致代码难以理解？

如果是的话我也放弃组合了，我现在是写好了代码（没有组合结构），然后在”优化“到组合结构的样子来省去好多代码。

清晰而合理的文档结构也是优秀设计的重要基础。

另外关于“结构和开发效率”之间的矛盾，随着CSS新版本（如CSS3或今后的后续版本等）的推出，由于一些先进的语法应用，这些都会逐步得到改善的。

WEB标准化确实要经历很多的困惑，有时在面对某些困惑时甚至能达到一个极端峰值——确实真的很痛苦！执着的痛苦！

不过只要你坚持，深索其理，最终即可融于其中并超然于其外了。

组合不是不可以用，看看yahoo UI 的css 框架，可以看出组合是有他的好处的，我想表明ID是一个非常好的，管理文档结构清晰合理的机制，可是ID带来的开发效率确实很低，而且id选择符的优先权又高于class，给开发带来了一定的难度。

说道使用CSS很容易就学会了，布局也就不过那几个属性，可是一个大的网站的样式和结构如何规划，管理，也就是web标准化的开发模式，成了头疼的问题，现在的CSS写法都各自为政，只有清晰的文档才能让其他的人很容易的维护别人的css文件，因为结构是同一的而且是清晰的。

其实还是一个兼顾文档结构合理清晰，而且开发效率还可以提高的这种状态的一个探索，但是有一个原则就是不可以破坏结构的合理性

挺好的文章。

初学者学CSS，进阶就必需要关注XHTML结构！

大概懂得了作者的意思了，但是因为是初学者，所以还是有些模糊。
其实我觉得既然应用标准了，就要做到尽量规范。其实并不难……
规范的代码总是没有坏处的。

似懂非懂，
强调标签语义化，文档结构合理清晰

引用:

原帖由 小毅 于 2006-10-29 13:46 发表
初学者学CSS，进阶就必需要关注XHTML结构！

今天在《CSS权威指南》中看到关于XHTML结构的重要性，也接触了网友的文章，很受用。

    我一开始就是因为CSS而来的，对CSS是情有独钟，毕竟它强大的功能给我留下了深刻的印象。但是随着学习的深入，我才意识到我忽略了CSS发挥强大作用的前提XHTML的结构。

    不熟悉结构，而单纯追求CSS的炫目功能。就像是一个不会走路，却而先学跑步的人一样。始终是没有扎实的基础的。

受教了。

组合对于我在应用当中碰到的问题是：如果上一级的改了，下面的就会受影响，有时候不得不在定一个不一样的class或id，也许我还没学到那种应用web标准游刃有余的地步，还得继续学习实践发现问题解决问题

我也是学web标准的,看了上面的文章知道自己学习的东西还很多 过来支持一下

才看到原发....
现在土豆网一些使用了新的架构命名，
class="pack pack_program"，
我认为这是最理想的方式——css类的抽象、继承、扩展和派生，带来了最好的复用性、可扩展性和可维护性。
土豆网涉及播客、小组、节目、豆单等所有盒模型都从抽象类pack继承和扩展而来
pack_user pack_group pack_program pack_list...
保证了共性和个性各司其职，架构健全。

并且，这样的语义化命名，不但没有破坏页面的结构，
反而清晰的表明其结构的可复用性，表明其继承和被复写的层次。
不过，类似class="right red top"这样的命名当然是有问题的。

呵呵，文章不错，但是个人觉得内容不切题，标题党。应该把标题改改了。

引用:

web标准就是web标准，叫别的都不对

这个多好啊，省得跟前面那个div+css的骂贴一样，到处都是口水。

支持啊。。只是我这个大菜鸟现在还没有分清非WEB标准哪里不好
不过有一点肯定的是，是标准应该就是好的

在Web标准的现阶段

遵循XHTML规范和CSS规范；

至于语义化，在语义明确的地方选择准确的语义标签；网页设计中难免有些元素语义含糊不好选择准确的语义标签，此时不应拘泥，大概用一个，或者就用div或span；

设计网页时不建议写纯语义化的XHTML后再布局美化，这样极度限制思维；建议从布局入手写XHTML，然后用CSS美化；不要被标准限制了思维。

恩，明白了一些用法习惯。~
良好的代码习惯会带来效率等的提高。~

我个人把css归类为两类：
1、本体类：如高 、宽 、绝对还是相对定位、层级、浮动等 。  -------这类属性写在 ID 里面。
2、修饰类：如：border、padding、color、margin等。---------这些写在class里。

修饰类的css属性尽量单开写在不同class , 然后进行class="class1 class2 ..." 的组合。

我很初级，正在探索中……

ding
挺好的文章

强贴留名

只有合理的结构，才是你web标准化的根本动机

web是承载信息的，没有理由为了视觉效果，而破坏合理的结构。

重视结构而不是表现