繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 语义化标记抛弃DIV标记
- CSS样式表
- 分页显示之超级提速版
- 兼容多浏览器实现半透明(Opera ie firefox)
- 解析IE, FireFox, Opera 浏览器支持Alpha透明的方法
- utf8和unicode编码究竟是什么关系？有何区别?
- XHTML下css+div布局总结 超强推荐
- 在IE下拖动滚动条时border消失的解决方法
- CSS中常用的单位
- 有关表格边框的css语法整理(1)
- 中文排版CSS心得
- 一个针对IE7的CSS Hack
- css也疯狂! 用background 插入flash播放器
- 如何解决下拉菜单被flash覆盖的问题
- 网页中关闭IE的图像工具栏和XP主题
- 解决IE升级后Flash线框问题
- em px的关系
- 在iframe中隐藏横向滚动条的方法大全
- Iframe自适应其加载的内容高度
- 固定右栏宽度, 左栏内容先出现同时自适应宽度的布局
- IE Bug--浮动对象外补丁的双倍距离的解决方法
- 解决IE7以下版本不支持无A状态伪类的几种方法
CSS样式表 中的 CSS 语义化标记抛弃DIV标记
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-11 浏览: 102 ::
收藏到网摘: 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的。
评论 (0) All
