注:本文中的例子應該用代碼展示的,但是因為現在用的DOCTYPE為XHTML1.0,浏覽器讀不出來HTML5代碼,pre也沒法
代碼閱讀,所以只能通過文字來說明了。
避免不必要的復雜性
如果可能,簡明的解決方案總是比復雜的解決方案更受歡迎。
HTML 4.01的文檔類型是這樣設置(因為浏覽器解析的原因,我把尖括號省略了):
!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”
XHTML 1.0的DOCTYPE是:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
而在HTML 5中,省掉不必要的復雜性,doctype就簡化成了:!DOCTYPE html
支持已有的內容
已存在的內容依賴於預期的用戶代理處理過程和行為,來實現預期的功能。
支持已有的內容是指,對已存在的內容100%的支持。
解決現實的問題
對應網頁內容面對的問題,不能迎合存在需要的摘要架構是勝不過實際的解決方案的。
舉例子,假設我使用HTML 4或XHTML 1,對應一個整塊內容,比如一個商品列表好了,有商品圖、商品標題、商品簡介等,我要分別給這三塊元素加上三個相同的鏈接。然而在HTML5裡面,你完全可以用一個a標簽包含這三個區塊。也就是,a標簽包含塊級元素。這解決了現實的問題。
求真務實
HTML5中新的語義元素就是遵循求真務實原理的反映。
假如你現在看網頁,估計都會有這樣的一些代碼: id=”header” id=”navigation” id=”main” id=”sidebar” id=”footer” 然而在HTML5裡面,新增的標簽可以把相應的div替換掉,比如header、nav、aside、footer。別以為這些是id的替換品,不是的,新標簽其實是替換class的,因為這些標簽可以在頁面中重復使用。
平穩退化
應該制定HTML5 文檔的一致性要求,甚至利用新元素、屬性、API和內容模型。這樣,網頁內容才能在更老或者能力較弱的用戶代理中優雅降級。
就用HTML5表單來說明吧,input新增的type有number、search、range、email、date、url等,這些新type值在不支持它的浏覽器裡面,將被解釋為text。所以,可以大膽使用HTML5表單,它做到了“優雅降級”。
最終用戶優先
一旦遇到沖突,最終用戶優先,其次是作者,其次是實現者,其次標准制定者,最後才是理論上的完滿。
PDF:design of html5