CSS 语义化标记抛弃DIV标记

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

复制代码

代码如下:

<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>

尽管这有些勉强，但上面这个实例还是可以说明使用HT ML 4对一个复杂的设计进行代码化后依然过于臃肿(其实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的。

总结

以上是 为你收集整理的 CSS 语义化标记抛弃DIV标记 全部内容，希望文章能够帮你解决 CSS 语义化标记抛弃DIV标记 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS 语义化标记抛弃DIV标记的详细内容...