CSS 语义化标记抛弃DIV标记
导读：收集整理的这篇文章主要介绍了CSS 语义化标记抛弃DIV标记，觉得挺不错的，现在分享给大家，也给大家做个参考。 曾经，设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和...
收集整理的这篇文章主要介绍了CSS 语义化标记抛弃DIV标记，觉得挺不错的，现在分享给大家，也给大家做个参考。 曾经，设计师们经常会跟频繁使用基于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>
尽管这有些勉强，但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是，HTML5解决“div> -soup” 综合症并带给我们一套新的结构化元素。这些新的HTML5元素富有更细致的语义从而代替了那些毫无语义的div> 标签，并同时为CSS的调用提供了”自然”的CSS钩子。下面是HTML5的解决方案实例:
复制代码代码如下:
section>
section>
article>
header>
h1> Div Soup Demonstration/h1>
p> Posted on July 11th, 2009/p>
/header>
section>
p> Lorem ipsum text blah blah blah./p>
p> Lorem ipsum text blah blah blah./p>
p> Lorem ipsum text blah blah blah./p>
/section>
footer>
p> Tags: HMTL, code, demo/p>
/footer>
/article>
aside>
header>
h1> Tangential Information/h1>
/header>
section>
p> Lorem ipsum text blah blah blah./p>
p> Lorem ipsum text blah blah blah./p>
p> Lorem ipsum text blah blah blah./p>
/section>
footer>
p> Tags: HMTL, code, demo/p>
/footer>
/aside>
/section>
/section>
正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的div> 标签。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上，CSS3也是可以然通过我们忽略掉所有class和id的。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS 语义化标记抛弃DIV标记
本文地址： https://pptw.com/jishu/584793.html