| |
曾經(jīng)，設(shè)計(jì)師們經(jīng)常會跟頻繁使用基于table的沒有任何語義的布局。不過最終還是要感謝像Jeffrey Zeldman和Eric Meyer這樣的思想革新者，聰明的設(shè)計(jì)師們慢慢的接受了相對更語義化的＜div＞布局替代了table布局，并且開始調(diào)用外部樣式表。但不幸的是，復(fù)雜的網(wǎng)頁設(shè)計(jì)需要大量不同的標(biāo)簽結(jié)構(gòu)代碼，我們把它叫做“＜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＞
盡管這有些勉強(qiáng)，但上面這個(gè)實(shí)例還是可以說明使用HTML4對一個(gè)復(fù)雜的設(shè)計(jì)進(jìn)行代碼化后依然過于臃腫(其實(shí)xHTML1.1也不過如此)。不過值得激動的是，HTML5解決“＜div＞-soup” 綜合癥并帶給我們一套新的結(jié)構(gòu)化元素。這些新的HTML5元素富有更細(xì)致的語義從而代替了那些毫無語義的＜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＞
正如我們所見，HTML5可以讓我們用很多更語義化的結(jié)構(gòu)化代碼標(biāo)簽代替那些大量的無意義的＜div＞標(biāo)簽。這種語義化的特性不僅提升了我們網(wǎng)頁的質(zhì)量和語義，并且大量減少了曾經(jīng)代碼中用于CSS必須調(diào)用的class和id屬性。事實(shí)上，CSS3也是可以然通過我們忽略掉所有class和id的。
|
|
|
| 【收藏】【打印】【進(jìn)入論壇】 |
|
|
|
|
| |
|
|
|
