Web設(shè)計(jì)師可以使用HTML4和CSS2.1完成一些很酷的東西。我們可以在不使用陳舊的基于table布局的基礎(chǔ)上完成文檔邏輯結(jié)構(gòu)并創(chuàng)建 內(nèi)容豐富的網(wǎng)站。我們可以在不使用內(nèi)聯(lián) font 和 br 標(biāo)簽的基礎(chǔ)上對(duì)網(wǎng)站添加漂亮而細(xì)膩的風(fēng)格樣式。事實(shí)上，我們目前的 設(shè)計(jì)能力已經(jīng)讓我們遠(yuǎn)離了那個(gè)可怕的瀏覽器戰(zhàn)爭(zhēng)時(shí)代、專有協(xié)議和那些充滿閃動(dòng)、滾動(dòng)和閃爍的丑陋網(wǎng)頁(yè)。 雖然我們現(xiàn)在已經(jīng)普遍使用了HTML4和CSS2.1，但是我們還可以做得更好！我們可以重組我們代碼的結(jié)構(gòu)并能讓我們的頁(yè)面代碼更富有語(yǔ)義化特性。 我們可以縮減帶給頁(yè)面美麗外觀樣式代碼量并讓他們有更高的可擴(kuò)展性。現(xiàn)在，HTML5和CSS3正躍躍欲試的等待大家，下面讓我們來(lái)看看他們是否真的能讓 我們的設(shè)計(jì)提升到下一個(gè)高度吧 跟 div 說(shuō)再見(jiàn),歡迎語(yǔ)義化標(biāo)簽曾經(jīng)，設(shè)計(jì)師們經(jīng)常會(huì)跟頻繁使用基于table的沒(méi)有任何語(yǔ)義的布局。不過(guò)最終還是要感謝像Jeffrey Zeldman和Eric Meyer這樣的思想革新者，聰明的設(shè)計(jì)師們慢慢的接受了相對(duì)更語(yǔ)義化的 div 布局替代了table布局，并且開(kāi)始調(diào)用外部樣式表。但不 幸的是，復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)需要大量不同的標(biāo)簽結(jié)構(gòu)代碼，我們把它叫做 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 盡管這有些勉強(qiáng)，但上面這個(gè)實(shí)例還是可以說(shuō)明使用HTML4對(duì)一個(gè)復(fù)雜的設(shè)計(jì)進(jìn)行代碼化后依然過(guò)于臃腫(其實(shí)xHTML1.1也不過(guò)如此)。不 過(guò)值得激動(dòng)的是，HTML5解決 div -soup 綜合癥并帶給我們一套新的結(jié)構(gòu)化元素。這些新的HTML5元素富有更細(xì)致的語(yǔ)義從而代替了那些毫無(wú)語(yǔ)義的 div 標(biāo)簽，并同時(shí)為CSS的調(diào) 用提供了 自然 的CSS鉤子。下面是HTML5的解決方案實(shí)例: 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 正如我們所見(jiàn)，HTML5可以讓我們用很多更語(yǔ)義化的結(jié)構(gòu)化代碼標(biāo)簽代替那些大量的無(wú)意義的 div 標(biāo)簽。這種語(yǔ)義化的特性不僅 提升了我們網(wǎng)頁(yè)的質(zhì)量和語(yǔ)義，并且大量減少了曾經(jīng)代碼中用于CSS必須調(diào)用的html' target='_blank'>class和id屬性。事實(shí)上，CSS3也是可以然通過(guò)我們忽略掉所有 class和id的。跟class屬性說(shuō)再正如我們所見(jiàn)，HTML5可以讓我們用很多更語(yǔ)義化的結(jié)構(gòu)化代碼標(biāo)簽代替那些大量的無(wú)意義的標(biāo)簽。這種語(yǔ)義化的特性不僅提升了我們網(wǎng)頁(yè)的質(zhì)量和語(yǔ)義，并且大量減少了曾經(jīng)代碼中用于CSS必須調(diào)用的class和id屬性。事實(shí)上，CSS3也是可以然通過(guò)我們忽略掉所有 class和id的。 跟class屬性說(shuō)再見(jiàn)，歡迎整潔的標(biāo)簽結(jié)合了富有新的語(yǔ)義化標(biāo)記的HTML5，CSS3為web設(shè)計(jì)師們的網(wǎng)頁(yè)提供了神一般的力量。有了HTML5的能量，我們將得到更多的對(duì)文檔代碼的控制權(quán)，有了CSS3的能量，我們的控制權(quán)將趨于無(wú)窮大！即使沒(méi)有那些高級(jí)的CSS選擇器，我們?nèi)匀豢梢酝ㄟ^(guò)強(qiáng)大的HTML5條調(diào)用不同的容器而不勞駕class和id這類屬性。像以往的DIV布局，我們?cè)赾ss中可能要這樣調(diào)用: div#news {} div.section {} div.article {} div.header {} div.content {} div.footer {} div.aside {} 這是個(gè)進(jìn)步，但仍有一些問(wèn)題需要解決。在 div 實(shí)例中，我們需要通過(guò)class或id屬性來(lái)調(diào)用頁(yè)面中的元素。這種邏輯將允許 我們將樣式應(yīng)用到文檔中的任何一個(gè)元素上，無(wú)論是整體還是個(gè)體。例如在 div 實(shí)例中，.section 和 .content元素很容易定位。但是在HTML5實(shí)例中，實(shí)際文檔中會(huì)有很多個(gè)section元素。其實(shí)我們可以添加一些特定的屬性選擇器來(lái)調(diào)用那些不 同的section元素，不過(guò)謝天謝地，我沒(méi)現(xiàn)在可以用少量的高級(jí)CSS選擇器來(lái)定位不同的section元素。不使用class和id定位HTML-5元素下面讓我們來(lái)看看如何在不使用class和id的情況下定位HTML5頁(yè)面元素的一個(gè)實(shí)例，我們可以使用三種CSS選擇器來(lái)定位和辨別實(shí)例中的元素。如下: 后代選擇器:[CSS 2.1]: E F 兄弟選擇器:[CSS 2.1]: E + F 子元素選擇器:[CSS 2.1]: E F 下面讓我們來(lái)看看如何不使用class和id而完成對(duì)文檔中的那些section元素的定位吧:
