当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 语义化标记抛弃DIV标记

CSS样式表
web标准布局实例教程，用定位轻松解决CSS复杂布局
css静态滤镜
CSS 实用实例(推荐)
给超级链接增加其他样式
给图片加阴影效果的CSS
CSS反转字符加密邮箱地址
firefox样式表定义不支持cursor:hand
解决input对齐问题vertical-alige
表格隔行换色 css expression
HTML标记
CSS圆角区块容器生成器
容器高度100%的绝对定位布局
保存几个不错的css特效字
CSS滤镜示范(filter)附源代码(静态滤镜)
CSS实现表格的背景两色渐变
梦幻式下拉菜单
闭合浮动元素超级简单的方法
文字应用css滤镜集锦
巧用CSS滤镜做图案文字
_blank开新窗口不符合标准?

No. « 23 24 25 26 »

技术文章搜索

关键字

CSS样式表 中的 CSS 语义化标记抛弃DIV标记

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-11   浏览: 72 ::
收藏到网摘: n/a

曾经，设计师们经常会跟频繁使用基于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的。