今天想谈一下一个好的页面的必要条件-----去样式可读问题。
重构并非只是用div布局代替table布局这么简单。标签语义化才是它的核心。同行应该都听说过css裸体日。这个日子的目的是什么呢？我想应该是提醒大家，语义化标签的重要性。
因为css可以帮助我们改变标签的原始表现形式，比如说把一个内联的a变成block块级显示，把一个普通的span设置成字体很大，很粗的形式，表现得像一个标题。正因为如此，我们很容易就忘了去语义化标签，很多时候随便设一些标签，然后用css去控制它，得到我们想要的表现形式。同样的一个表现，也许他们的html完全不一样。
这其实是对css的一种滥用，更是对重构的曲解。如果说你觉得用div布局了就算是重构了，那绝对是你的误解。当我们在切一个页面的时候，应该考虑的不仅仅是如果通过css来达到我们想要的效果，同时应该更进一步去想，如果去掉样式，它的表现形式会怎样。为什么在css裸体日，我们常常看到国外的网站常常会有很好的格局，而我们很多的网站却惨不忍睹呢？在认真学好css的同时，我们应该熟练地了解一下html本身的默认样式。
首先，要说的是h标签，这个是标题标签，它有大字号，加粗，独占一行，有上下边距。很多时候，我们可能会用p,span或者是div设置字号，粗细和上下边距来完成这个表现形式，可是，一旦css去掉了，这些标签就没办法表现得像个标题了。它会淹没在大堆的文字中。如果用h标签，h1,h2,h3，而不是通过对p/span/div等标签设置字体大小精细的话，去css后，它就会很好地体现出标题的作用，以清晰的结构表现出文本之间的关系。所以，我们要尽量用h标签，不要用其它标签设置样式来达到显示成标题的目的。
再来说说p,span和div。p和div是块级的，而span是内联的。如果我们在对一个标签使用css的float样式的时候，我们任选一个标签，在css可用的情况下它们的表现形式会一模一样，可是我们还要考虑去css的表现形式。如果某个地方我们觉得它去样式的时候应该内联比较好，就应该选用span而不是p和div，反之亦然。而p和div的选用问题上，也存在一个问题。因为我们大家在写css以前，一定会在最开始将一些默认样式去掉，比如说写成*{margin:0;padding:0}或者body,div,p,ul.....{margin:0;padding:0},所以在使用的标签的时候，用p和用div基本上没有样式上的区别。（当然，根据DTD声明，它们允许的嵌套元素是不同的,这里我们仅指样式上的区别）。很多时候，为了图方便，我们都会选用万能的div，可是，去掉css的话，div默认是没有上下边距，而p是有上下边距的。也就是说，我们用一堆div用css设置上下边距，在样式可用的情况下，和用一堆p设置上下边距表现是一模一样的。可是，如果去样式，那么前者就是完全挤在一块儿的一堆元素，而后者却可以清晰地将每一块分离开来。所以，在使用span和p/div元素的时候，要考虑去样式时想让它内联还是另占一行。能用p的话，尽量用p，而不要用div。
再来说说br标签。br标签是用来强制换行的。在重设p样式为margin:0;padding:0;以后，用两个p来包含两段文字和用br来分隔两段文字，表现形式是一模一样的。也许你想过在p元素上设置line-height，然后再来br标签来分隔两段文字，从而节约一个p标签的话，请注意，去css以后，用br来实现的换行是没有上下间距的，文字看起来很显得很挤。而用两个p来换行的，默认是有上下间距的，会让你的文字看起来更舒展。所以，如果没有特殊需求,尽量使用几个不同的p标签来实现文字的换行，不要用br来换行。
最后还要说说strong标签。很多时候我们可能会用font-weight:bold，来帮助我们实现加粗效果。可是如果去掉样式的话，这些加粗就无影无踪了。而如果这些地方真的需要加以强调，我们可以用strong标签来包裹，而不是通过css来实现加粗，就可以在去样式的时候仍然让它显示为加粗状。这个元素也是非常实用的一个元素啊。
除了样式的一些心得，再向你推荐一下好的调试方法。FF有一个很出名的插件叫做web developer，它可以很轻松地实现去样式。快捷键是ctrl+shift+s。点击之后就可以看到你的页面去样式之后会是什么样子。再按一次切换回来。所以呢，大家应该养成一个好习惯，在切页面的时候，不但要看IE和FF的兼容，还要在FF下ctrl+shift+s一下，看看你的页面去样式的可读性。
下个css裸体日，你也会有一个漂亮的可读页面了，对不？