三、理解表现与内容相脱离

表现与内容相脱离，这应该算是web标准所提倡的核心了。按w3c提出的标准，将网页划分成了三大块，即结构层、表现层、行为层。下边我们还是以上一节中的效果图为例，来了解这三块内容。您可以在新窗口中打开这个页面。
Html代码：从页面代码的角度上看，我们应该说只能看到这些东西：就是一个标题，以及一个详细列表。所以说在脑海中初步形成的代码应该是：

<h4>标题</h4>
<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    ...
    <li>列表项</li>
</ul>

CSS代码：就是大家看到的视觉效果。通过更换css文件，我们可以在不修练html代码的基础上任意变换这个页面的视觉效果。所有的效果应该是与html内容本身没有关系的。因为视觉效果仅仅是为了让页面更漂亮、更容易让用户去接受。

Javascript:细心的朋友会发现，标题栏左侧有一个小三角形。通过点击这个图标，我们可以完成一个收缩功能，这就是行为，也是与页面内容无关的东西。

三种角色负责三个不同的分工，尽量不要去相互影响。

一个网页，应该以它的主体内容为根本，所以我主张。先编写html代码，在编写html代码时，我们尽量不去考虑为了迎合它的表现形式，这样才能写出结构化、语义化的页面代码。当然，在CSS实现以及行为脚本时，我们也允许最小程度的去修改现有的html代码，毕竟还有很多客观因素在制约着。但这绝不意味着像某些网站，纯粹为了通过w3c验证、为了实现某些不合理的效果图去写出类似于N个div嵌套、满页都是div的现象。时下所流行的一种叫法“div+css”让很多初学者对web标准产生了严重的误解，认为就是用div去代替以前的table，会产生“满页尽是div”的错误结论。
这种表现与内容相脱离的设计思想，对于页面制作人员而言,也同时提出了更高的要求：

• 抛弃"所见即所得"的网页编辑软件，改用手写。亲身去感受每一个html标签的真实意义。你会发现除了table标签，原来还有那么多有用而根本没有用过的标签。
• 以前只用DW、FP等软件拉出无数个表格然后填充些东西进去就能保存为网页的时代过去了，你要懂每一个html标签它应该布置在网页的什么位置。
• 页面html代码不负责页面的效果，它只是告诉浏览器我这个页面的结构和内容，所以刚开始时，你会觉得符合标准的页面做出来都比较难看，那是因为你还没有学会CSS，就算学会了，你还没有经过多次的这种html代码与css代码分开编写的实践。
• 要尽量让页面上的每一个标签都有它的实际意义。不要让html代码为css而活着。