CSS教程:語義化標(biāo)記拋棄DIV標(biāo)記

文章來源于網(wǎng)頁教學(xué)網(wǎng)，感謝作者 admin 給我們帶來經(jīng)精彩的文章！

設(shè)計教程/前端設(shè)計/前端設(shè)計2009-08-29

復(fù)雜的網(wǎng)頁設(shè)計需要大量不同的標(biāo)簽結(jié)構(gòu)代碼，我們把它叫做“div-soup” 綜合癥。

曾經(jīng)，設(shè)計師們經(jīng)常會跟頻繁使用基于table的沒有任何語義的布局。不過最終還是要感謝像Jeffrey Zeldman和Eric Meyer這樣的思想革新者，聰明的設(shè)計師們慢慢的接受了相對更語義化的<div>布局替代了table布局，并且開始調(diào)用外部樣式表。但不幸的是，復(fù)雜的網(wǎng)頁設(shè)計需要大量不同的標(biāo)簽結(jié)構(gòu)代碼，我們把它叫做“<div>-soup” 綜合癥。也許你很熟悉下面的代碼:

<<<

fixed; border-top: #cccccc 1px dotted; border-left: #cccccc 1px dotted; border-bottom: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"> color="#ff0000"> style="white-space: nowrap"><div id="news">
id="icciw9zca9a5" class="kw2">div class="section">
class="sc2"><div class="article">
class="sc2"><div class="header">
class="sc2"><h1>Div Soup Demonstration</h1>
class="sc2"><p>Posted on July 11th, 2009</p>
class="sc2"></div>
class="sc2"><div class="content">
class="sc2"><p>Lorem ipsum text blah blah blah.</p>
class="sc2"><p>Lorem ipsum text blah blah blah.</p>
class="sc2"><p>Lorem ipsum text blah blah blah.</p>
class="sc2"></div>
class="sc2"><div class="footer">
class="sc2"><p>Tags: HMTL, code, demo</p>
class="sc2"></div>
class="sc2"></div>
class="sc2"><div class="aside">
class="sc2"><div class="header">
class="sc2"><h1>Tangential Information</h1>
class="sc2"></div>
class="sc2"><div class="content">
class="sc2"><p>Lorem ipsum text blah blah blah.</p>
class="sc2"><p>Lorem ipsum text blah blah blah.</p>
class="sc2"><p>Lorem ipsum text blah blah blah.</p>
class="sc2"></div>
class="sc2"><div class="footer">
class="sc2"><p>Tags: HMTL, code, demo</p>
class="sc2"></div>
class="sc2"></div>
id="icciw9zca9a5" class="sy0">/div>
class="sy0">/div>

　　盡管這有些勉強(qiáng)，但上面這個實例還是可以說明使用HTML4對一個復(fù)雜的設(shè)計進(jìn)行代碼化后依然過于臃腫(其實xHTML1.1也不過如此)。不過值得激動的是，HTML5解決“<div>-soup” 綜合癥并帶給我們一套新的結(jié)構(gòu)化元素。這些新的HTML5元素富有更細(xì)致的語義從而代替了那些毫無語義的<div>標(biāo)簽，并同時為CSS的調(diào)用提供了”自然”的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可以讓我們用很多更語義化的結(jié)構(gòu)化代碼標(biāo)簽代替那些大量的無意義的<div>標(biāo)簽。這種語義化的特性不僅提升了我們網(wǎng)頁的質(zhì)量和語義，并且大量減少了曾經(jīng)代碼中用于CSS必須調(diào)用的class和id屬性。事實上，CSS3也是可以然通過我們忽略掉所有class和id的。

討論: http://www.missyuan.com/viewthread.php?tid=417004

情非得已

日本a在线观看_久久久三区_久久99精品久久久久久国产越南_在线观看中文字幕av_国产精品久久久久久久久久东京_a免费视频

CSS教程:語義化標(biāo)記拋棄DIV標(biāo)記