繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 语义化标记抛弃DIV标记
- CSS样式表
- CSS优先级规则的细节
- CSS失效，原来是和网页第一段代码有关
- 你真的了解CSS吗？你是属于哪个层次？
- 让样式表CSS代码更加专业规范
- 建议网页设计师用CSS制作网站导航菜单
- 简单学习css组合与CSS嵌套的写法
- CSS学习之css代码的简写的十条规则
- 条件CSS的介绍
- CSS教程:网页中多个样式表顺序问题
- CSS教程：网页版面设计无效的10个原因
- 页面重构工程师应该具有的技能和素质
- 选择正确DOCTYPE解决CSS在网页失效问题
- Opera中国的WEB标准课程
- 简单介绍Web Developer插件制作网页
- CSS布局带来的巨大影响:CSS display属性值
- 用div css模拟表格对角线
- IE Firefox在css中的差别 (部分)
- 不用js可以实现信息提示效果
- CSS解决未知高度的垂直水平居中自适应问题
- CSS cursor 属性 -- 鼠标指针样式效果
CSS样式表 中的 CSS 语义化标记抛弃DIV标记
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-11 浏览: 70 ::
收藏到网摘: 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
