CSS 词义化标识抛下DIV标识

日期:2021-01-20 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

以前,设计方案师们常常会跟经常应用根据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对1个繁杂的设计方案开展编码化后仍然过度臃肿(实际上xHTML1.1也但是这般)。但是值得兴奋的是,HTML5处理“<div>-soup” 综合性症并带给大家1套新的构造化元素。这些新的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的。
上一篇:CSS新手入门篇之传智播客学习培训 返回下一篇:没有了