CSS教程:语义化标记抛弃DIV标记 1

      曾经，设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者，聪明的设计师们慢慢的接受了相对更语义化的

布局替代了table布局，并且开始调用外部样式表。但不幸的是，复杂的网页设计需要大量不同的标签结构代码，我们把它叫做“

-soup” 综合症。也许你很熟悉下面的代码:

 

   

     

         

           

Div Soup Demonstration

           

Posted on July 11th, 2009

         

         

           

Lorem ipsum text blah blah blah.

           

Lorem ipsum text blah blah blah.

           

Lorem ipsum text blah blah blah.

         

         

           

Tags: HMTL, code, demo

         

     

     

         

           

Tangential Information

         

         

           

Lorem ipsum text blah blah blah.

           

Lorem ipsum text blah blah blah.

           

Lorem ipsum text blah blah blah.

         

         

           

Tags: HMTL, code, demo

         

     

   

 

　　尽管这有些勉强，但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是，HTML5解决“

-soup” 综合症并带给我们一套新的结构化元素。这些新的HTML5元素富有更细致的语义从而代替了那些毫无语义的

标签，并同时为CSS的调用提供了”自然”的CSS钩子。下面是HTML5的解决方案实例:

 

   

     

         

           

Div Soup Demonstration

           

Posted on July 11th, 2009

         

         

           

Lorem ipsum text blah blah blah.

           

Lorem ipsum text blah blah blah.

           

Lorem ipsum text blah blah blah.

         

         

           

Tags: HMTL, code, demo

         

     

     

   

 

　　正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的

标签。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上，CSS3也是可以然通过我们忽略掉所有class和id的。

       讨论: http://www.haoyidiansheji.com/viewthread.php?tid=417004

声明：本站所有文章均摘自网络。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。