Facebook加入
LINE加入
2021/12/25
教學主題: CSS教程:語義化標記拋棄DIV標記
大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學
今天的這個教學主題是: CSS教程:語義化標記拋棄DIV標記
這教學的重點為這幾點 [ 標記,拋棄,語義,教程,blah,div,ipsum,bla ]
希望你可以從這幾點中領悟到修圖的精華
本文重點
複雜的網頁設計需要大量不同的標籤結構代碼，我們把它叫做“div-soup” 綜合症。
曾經，設計師們經常會跟頻繁使用基於table的沒有任何語義的布局。不過最終還是要感謝像Jeffrey Zeldman和Eric Meyer這樣的思想革新者，聰明的設計師們慢慢的接受了相對更語義化的
布局替代了table布局，並且開始調用外部樣式表。但不幸的是，複雜的網頁設計需要大量不同的標籤結構代碼，我們把它叫做“
-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解決“
-soup” 綜合症並帶給我們一套新的結構化元素。這些新的HTML5元素富有更細緻的語義從而代替了那些毫無語義的
標籤，並同時為CSS的調用提供了”自然”的CSS鉤子。下面是HTML5的解決方案實例:
| <h1>Div Soup Demonstration</h1> <p>Posted on July 11th, 2009</p> </header> <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> |
正如我們所見，HTML5可以讓我們用很多更語義化的結構化代碼標籤代替那些大量的無意義的
標籤。這種語義化的特性不僅提升了我們網頁的質量和語義，並且大量減少了曾經代碼中用於CSS必須調用的class和id屬性。事實上，CSS3也是可以然通過我們忽略掉所有class和id的。
討論: http://www.missyuan.com/viewthread.php?tid=417004
看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?
希望我們所介紹的 CSS教程:語義化標記拋棄DIV標記 這教學會喜歡
文章標題: 骨子愛創意- CSS教程:語義化標記拋棄DIV標記–轉載請註明來源處
本教學分類為網頁設計教程中的 其他教程相關教學
文章相關關鍵字為: 標記,拋棄,語義,教程,blah,div,ipsum,bla
本文永久連結 :CSS教程:語義化標記拋棄DIV標記
本文轉載自 :VIA
熱門推薦
留言回覆
