繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 语义化标记抛弃DIV标记
- CSS样式表
- css important终级讲解
- HTML 页面输出应该遵循的几点原则分析小结
- Google 谷歌内页logo的呈现方式(图片下面有文字)
- 10个DIV+CSS需要注意的问题
- 最常用和实用的CSS技巧
- CSS 首行缩进两个文字
- 黑客选择CSS挂马 CSS挂马攻防实录
- 制作高效可维护组件化的CSS代码
- 验证并修复css错误内容的相关连接
- html+css实现数据图表的展示效果
- 减少代码和语义化标签实现方法
- 3个css框架分享网站
- 简单但很实用的5个css属性
- DIV+CSS的叫法是不准确的
- CSS 使用table布局网页是不明智
- xHTML+CSS与SEO的关系
- CSS 控制页面样式的4种方式和优先级问题
- CSS教程 CSS选择器
- CSS 选择器命名规范化
- CSS 理解盒子模型
CSS样式表 中的 CSS 语义化标记抛弃DIV标记
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-11 浏览: 56 ::
收藏到网摘: 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
