Web設計師可以使用HTML4和CSS2.1完成一些很酷的東西。我們可以在不使用陳舊的基于table布局的基礎上完成文檔邏輯結構并創建 內容豐富的網站。我們可以在不使用內聯 font 和 br 標簽的基礎上對網站添加漂亮而細膩的風格樣式。事實上，我們目前的 設計能力已經讓我們遠離了那個可怕的瀏覽器戰爭時代、專有協議和那些充滿閃動、滾動和閃爍的丑陋網頁。 雖然我們現在已經普遍使用了HTML4和CSS2.1，但是我們還可以做得更好！我們可以重組我們代碼的結構并能讓我們的頁面代碼更富有語義化特性。 我們可以縮減帶給頁面美麗外觀樣式代碼量并讓他們有更高的可擴展性。現在，HTML5和CSS3正躍躍欲試的等待大家，下面讓我們來看看他們是否真的能讓 我們的設計提升到下一個高度吧 跟 div 說再見,歡迎語義化標簽曾經，設計師們經常會跟頻繁使用基于table的沒有任何語義的布局。不過最終還是要感謝像Jeffrey Zeldman和Eric Meyer這樣的思想革新者，聰明的設計師們慢慢的接受了相對更語義化的 div 布局替代了table布局，并且開始調用外部樣式表。但不 幸的是，復雜的網頁設計需要大量不同的標簽結構代碼，我們把它叫做 div -soup 綜合癥。也許你很熟悉下面的代碼: div id= news div > div > div > h1 Div Soup Demonstration /h1 p Posted on July 11th, 2009 /p /div div > 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 > p Tags: HMTL, code, demo /p /div /div div > div > h1 Tangential Information /h1 /div div > 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 > 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必須調用的html' target='_blank'>class和id屬性。事實上，CSS3也是可以然通過我們忽略掉所有 class和id的。跟class屬性說再正如我們所見，HTML5可以讓我們用很多更語義化的結構化代碼標簽代替那些大量的無意義的標簽。這種語義化的特性不僅提升了我們網頁的質量和語義，并且大量減少了曾經代碼中用于CSS必須調用的class和id屬性。事實上，CSS3也是可以然通過我們忽略掉所有 class和id的。 跟class屬性說再見，歡迎整潔的標簽結合了富有新的語義化標記的HTML5，CSS3為web設計師們的網頁提供了神一般的力量。有了HTML5的能量，我們將得到更多的對文檔代碼的控制權，有了CSS3的能量，我們的控制權將趨于無窮大！即使沒有那些高級的CSS選擇器，我們仍然可以通過強大的HTML5條調用不同的容器而不勞駕class和id這類屬性。像以往的DIV布局，我們在css中可能要這樣調用: div#news {} div.section {} div.article {} div.header {} div.content {} div.footer {} div.aside {} 這是個進步，但仍有一些問題需要解決。在 div 實例中，我們需要通過class或id屬性來調用頁面中的元素。這種邏輯將允許 我們將樣式應用到文檔中的任何一個元素上，無論是整體還是個體。例如在 div 實例中，.section 和 .content元素很容易定位。但是在HTML5實例中，實際文檔中會有很多個section元素。其實我們可以添加一些特定的屬性選擇器來調用那些不 同的section元素，不過謝天謝地，我沒現在可以用少量的高級CSS選擇器來定位不同的section元素。不使用class和id定位HTML-5元素下面讓我們來看看如何在不使用class和id的情況下定位HTML5頁面元素的一個實例，我們可以使用三種CSS選擇器來定位和辨別實例中的元素。如下: 后代選擇器:[CSS 2.1]: E F 兄弟選擇器:[CSS 2.1]: E + F 子元素選擇器:[CSS 2.1]: E F 下面讓我們來看看如何不使用class和id而完成對文檔中的那些section元素的定位吧:
