Web設計師可以使用HTML4和CSS2.1完成一些很酷的東西。我們可以在不使用陳舊的基于table布局的基礎上完成文檔邏輯結構并創(chuàng)建 內(nèi)容豐富的網(wǎng)站。我們可以在不使用內(nèi)聯(lián)<font>和<br>標簽的基礎上對網(wǎng)站添加漂亮而細膩的風格樣式。事實上，我們目前的 設計能力已經(jīng)讓我們遠離了那個可怕的瀏覽器戰(zhàn)爭時代、專有協(xié)議和那些充滿閃動、滾動和閃爍的丑陋網(wǎng)頁。
雖然我們現(xiàn)在已經(jīng)普遍使用了HTML4和CSS2.1，但是我們還可以做得更好！我們可以重組我們代碼的結構并能讓我們的頁面代碼更富有語義化特性。 我們可以縮減帶給頁面美麗外觀樣式代碼量并讓他們有更高的可擴展性。現(xiàn)在，HTML5和CSS3正躍躍欲試的等待大家，下面讓我們來看看他們是否真的能讓 我們的設計提升到下一個高度吧…
跟<div>說再見,歡迎語義化標簽
曾經(jīng)，設計師們經(jīng)常會跟頻繁使用基于table的沒有任何語義的布局。不過最終還是要感謝像Jeffrey Zeldman和Eric Meyer這樣的思想革新者，聰明的設計師們慢慢的接受了相對更語義化的<div>布局替代了table布局，并且開始調(diào)用外部樣式表。但不 幸的是，復雜的網(wǎng)頁設計需要大量不同的標簽結構代碼，我們把它叫做“<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的調(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可以讓我們用很多更語義化的結構化代碼標簽代替那些大量的無意義的<div>標簽。這種語義化的特性不僅 提升了我們網(wǎng)頁的質(zhì)量和語義，并且大量減少了曾經(jīng)代碼中用于CSS必須調(diào)用的class和id屬性。事實上，CSS3也是可以然通過我們忽略掉所有 class和id的。
[1] [2] [3] 下一頁 |
您現(xiàn)在的位置： 
