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

CSS样式表
CSS教程:dl dt dd模拟表格实例
网页制作实例:将PSD网站模板转换为XHTML+CSS网页
CSS布局实例代码:两列布局实例
border:none;与border:0;的区别
CSS浮动定位:引起文本重影的怪异问题
同一张PNG8图片为何部份图标在IE6中消失
IE6中背景属性加a与a:hover问题
网页制作教程:在IE7中的网页文本重影问题
推动浏览器更新的原因和方法
CSS实例教程:制作网页列表菜单
CSS实例教程:制作网站横向导航
CSS实例教程:制作网页2级导航
CSS研究教程:类名的长命名和短命名
CSS教程:彻底弄清楚CSS的行高属性
用CSS的float和clear属性进行三栏网页布局
没有JS只用CSS制作的网页下拉菜单
初学CSS的基础教程:在网页中使用CSS
网页制作教程:制作拖拽翻页
制作网页时编写CSS代码的25个小技巧
CSS3中很有用的特性:CSS阴影

No. « 100 101 102 103 »

技术文章搜索

关键字

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

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

　曾经，设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者，聪明的设计师们慢慢的接受了相对更语义化的<div>布局替代了table布局，并且开始调用外部样式表。但不幸的是，复杂的网页设计需要大量不同的标签结构代码，我们把它叫做“<div>-soup” 综合症。也许你很熟悉下面的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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的解决方案实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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的。