HTML5、CSS3应用教程之跟DIV说再见

Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站。我们可以在不使用内联<font>和<br>标签的基础上对网站添加漂亮而细腻的风格样式。事实上，我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时代、专有协议和那些充满闪动、滚动和闪烁的丑陋网页。

　　虽然我们现在已经普遍使用了HTML4和CSS2.1，但是我们还可以做得更好！我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在，HTML5和CSS3正跃跃欲试的等待大家，下面让我们来看看他们是否真的能让我们的设计提升到下一个高度吧…

曾经，设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者，聪明的设计师们慢慢的接受了相对更语义化的<div>布局替代了table布局，并且开始调用外部样式表。但不幸的是，复杂的网页设计需要大量不同的标签结构代码，我们把它叫做“<div>-soup” 综合症。也许你很熟悉下面的代码:

<div id="news"> <div class="section"> <div class="article"> <div class="header"> <h1>Div Soup Demonstration</h1> <p>Posted on July 11th, 2009</p> </div> <div class="content"> <p>Lorem ipsum text blah blah blah.</p> <p>Lorem ipsum text blah blah blah.</p> <p>Lorem ipsum text blah blah blah.</p> </div> <div class="footer"> <p>Tags: HMTL, code, demo</p> </div> </div> <div class="aside"> <div class="header"> <h1>Tangential Information</h1> </div> <div class="content"> <p>Lorem ipsum text blah blah blah.</p> <p>Lorem ipsum text blah blah blah.</p> <p>Lorem ipsum text blah blah blah.</p> </div> <div class="footer"> <p>Tags: HMTL, code, demo</p> </div> </div> </div> </div>