html5入門之設計原理

html5和CSS3的時代到來了，新版2011版淘寶網首頁已全部使用HTML5，擁抱變化才是王道。為之漫筆翻譯的很好，看了一遍後，感覺理解了很多，強烈推薦其他做開發的童鞋尤其前端也來看看。

不僅讓我摸清了html4，xhtml1.0, xhtml2.0, html5之間的關系，也理解了為什麼會出現HTML5，同時，加緊推進在項目中應用HTML5。

著名的阿西莫夫機器人三大法則：

機器人不得傷害人類，或袖手旁觀人類受傷害。

機器人必須服從人類命令，除非命令違反第一法則。

機器人必須自衛，只要不違背第一和第二法則。

xhtml1.0與html4.0相同點：

兩個規范的內容是一樣的;

詞匯表是一樣的;

所有的元素是一樣;

所有的屬性也都是一樣的;

xhtml1.0與html4.0唯一不同點：

XHTML 1.0要求使用XML語法(嚴格的編碼風格)

//所有屬性都必須使用小寫字母;

//所有元素也必須使用小寫字母;

//所有屬性值都必須加引號;

//你還得記著使用結束標簽，記著對img和br要使用自結束標簽。

XHTML 1.1與xhtml1.0唯一的變化：

把文檔標記為XML文檔

//XML的錯誤處理模型:解析器如果遇到錯誤，停止解析。

//不能理解XML的浏覽器，用戶直接看不到這個網頁了。

XHTML 2特點(這個規范沒有完成):

仍然使用XML錯誤處理模型，你必須保證以XML文檔類型發送文檔;

有意不再向後兼容已有的HTML的各個版本,開發人員和浏覽器廠商永遠不會支持它。

真正廣泛地應用的設計原理：

發送時要保守;接收時要開放。

//作為專業人士，在發送文檔的時候，我們會盡量保守一些，盡量采用最佳實踐，盡量確保文檔格式良好。

//但從浏覽器的角度說，它們必須以開放的姿態去接收任何文檔。

HTML5

1、2004成立了Web Hypertext Applications Technology Working Group(Web超文本應用技術工作組，WHATWG)，完全脫離W3C。

2、W3C在2007年組建了HTML5工作組，在WHATWG工作成果的基礎上繼續開展工作。

HTML5設計原理一：避免不必要的復雜性

代碼如下

一、DOCTYPE的寫法：

//HTML 4.01：

//XHTML 1.0：

//HTML5：

//

這種寫法會觸發浏覽器的標准模式。備注：doctype它不是寫給浏覽器看的,Doctype是寫給驗證器看的。讓驗證器按照該doctype來驗證我的文檔。

二、指定文檔的字符編碼的寫法：

代碼如下

//HTML 4.01：

//XHTML 1.0:

//HTML5:

備注：此簡短寫法，它不僅適用於最新版本的浏覽器，只要是今天還有人在用的浏覽器都同樣有效。

HTML5其他簡潔寫法：

代碼如下

//無需再寫type="text/css"，否則那就是重復自己了

//無需再寫使用的腳本語言 type="text/javascript"HTML5設計原理二：支持已有的內容

在JavaScript，你可以在每條語句末尾加上分號，但不是必需的，因為JavaScript會自動插入分號……JSlint確實是個非常棒的工具,規范統一JavaScript編碼風格，在團隊項目非常有用。

HTML5設計原理三：解決現實的問題

給整塊內容(含多個塊級元素)加個鏈接

代碼如下

//HTML 4.01 XHTML 1.0:

Headline text

Paragraph text.

//HTML5:

Headline text

Paragraph text.

備注：這種寫法其實早就已經存在於浏覽器中了，但以前這樣寫是不合乎規范的，現在我們把標准改了，允許你這樣寫了。

--------------------------------------------------------------------------------

HTML5設計原理四：求真務實

新增語義元素涉及頭部(header)、腳部(footer)、分區(section)、文章(article)……

備注：新元素section、article、aside和nav代表了一種新的內容模型，一種HTML中前所未有的內容模型——給內容分區。

將新元素作為類的替代品更有價值，因為這些元素在一個頁面中不止可以使用一次，而是可以使用多次，可嵌套使用。

其中最為通用的section，可以說是與內容最相關的一個。而article則是一種特殊的section。Aside呢，是一種特殊的section。最後，Nav也是一種特殊的section。

代碼如下

/HTML 4.01 XHTML 1.0:

//HTML5:

備注：在HTML5中，只要你建立一個新的內容塊，不管用section、article、aside、nav，還是別的元素，都可以在其中使用H1，而不必擔心這個塊裡的標題在整個頁面中應該排在什麼級別;H2、H3，都沒有問題。

HTML5設計原理五：平穩退化

漸進增強的另一面就是平穩退化。

使用type屬性增強表單：

代碼如下

input type="number"

input type="search"

input type="range"

input type="email"

input type="date"

input type="url"

備注：

現有的浏覽器無法理解這些新type值的，但在它們看到自己不理解的type值時，會將type的值解釋為text。

HTML5還為輸入元素增加了新的屬性，比如placeholder(占位符)，就是用於在文本框中預先放一些文本。無需JavaScript去實現，HTML5視頻對Flash視頻(video元素)：

備注：兩者要兼顧，無論是HTML5，還是Flash:

如果浏覽器支持video元素，也支持H264，沒什麼好說的，用第一個視頻。

如果浏覽器支持video元素，支持Ogg，那麼用第二個視頻。

如果浏覽器不支持video元素，那麼就要試試Flash影片了。

如果浏覽器不支持video元素，也不支持Flash，我還給出了下載鏈接。

遵循另一個設計原理，即梅特卡夫定律(Metcalfe’s Law)：

以上就是我們給大家介紹的html5的方法了。希望大家繼續關注我們的網站!