標籤：
建立一個簡單得HTML5頁面ch01e2.html
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> </head> <body> hello to the HTML5 world. </body></html>
HTML5和其他HTML頁面的唯一區別就在於我們使用的檔案類型定義（DTD Document Type Definition）:<!doctype html>
Safari(iPhone最常用的瀏覽器)會根據<meta name="viewport" content="width=device-width,initial-scale=1.0">,將頁面寬度設為螢幕寬度，並且根據initial-scale=1禁用瀏覽器的縮放。
HTML5與版本號碼
為什麼HTML5會沒有版本號碼？
1.瀏覽器並不會針對HTML的某個版本做支援，而是針對某個功能做支援。就是說如果瀏覽器支援你使用某個功能，及時你把文檔申明為HTML4，瀏覽器仍然會按照HTML5的標準來顯示頁面。
2.名字可以很簡潔。
移動文件類型
使用HTML5文件類型<!doctype html>是否是可靠的？
文件類型只是用作確認，而非瀏覽器實際顯示。
在怪異模式（一些網頁瀏覽器為了維持對較舊的網頁設計的向後相容性而使用的一種技術）中是否是可靠的？
<!doctype html>是瀏覽器按照標準工作所需要的最少的資訊，所以使用<!doctype html>時非常可靠的。
我們使用<!doctype html>而不是<!DOCTYPE html>,這是因為HTML5不是大小寫敏感，但是出於一致性的考慮，我們都將使用小寫。
跨瀏覽器HTML5
舊瀏覽器無法識別HTML5元素，也無法對這些元素設定樣式，但是有許多工具可以解決這個問題，例如Modernizr.
Windows Mobile的內建瀏覽器無法識別HTML5元素。如果沒有Windows Mobile你可以使用IE7來測試，因為他們都是基於相同的瀏覽器引擎。Modernizr：http://www.modernizr.com/
建立HTML檔案ch01e3.html
<!doctype html><html> <head> <title>Mobile Cookbook</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> header, footer {display:block;} </style> </head> <body> <header> Main Navigation here </header> body content here <footer> Footer links here </footer> </body></html>
再建立一個HTML檔案ch01e4.html,引入Modernizr。
modernizr-1.7.min.js 下載：http://pan.baidu.com/s/1c0v1Api 提取碼：kepb
<!doctype html><html> <head> <title>Mobile Cookbook</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="modernizr-1.7.min.js"></script> <style> header, footer {display:block;} </style> </head> <body> <header> Main Navigation here </header> body content here <footer> Footer links here </footer> </body></html>
：
Modernizr的使用需要在<head>標籤中引入。Modernizr不是唯一可以協助我們跨瀏覽器的 庫，還有其他兩點值得注意：
1.html5shim,對列印也同樣有效：http://code.google.com/p/html5shim/
2.InnerShiv,支援元素的innerHTML。http://jdbartlett.github.com/innershiv/
HTML5 CSS重設
下面的代碼可以清除HTML5元素的預設樣式：
article,aside,canvas,detailsfigcaption,figure,footer,header,hgroup,menu,nav,se
ction,summary,time,mark,audio,video{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
使HTML5元素在舊版本IE中變為區塊層級元素：
下面的代碼可以使HTML5圓度變為區塊層級元素，但是不是所有的HTML5元素都需要顯示為區塊層級元素。
下面是HTML5中的區塊層級元素：
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
display:block;
}
Modernizr
Modernizr不僅使HTML5元素可以被設定樣式，他還可以檢測HTML5各個功能在不同瀏覽器中的相容性。你可以在2.0版本中自訂下載內容：http://www.modernizr.com/download/
學習HTML5的免費資源
如果你對HTML5不是很熟悉，可以在下面的網站學習：
HTML5 Doctor:http://html5doctor.com/
Dive Into HTML5:http://diveintohtml5.org/
HTML5 Rocks:http://www.html5rocks.com/
如果希望詳細瞭解HTML5，你可以閱讀官方HTML5文檔，W3C版本的文檔： http://dev.w3.org/html5/spec/Overview.html
WHATWG版本的線上標準：http://www.whatwg.org/specs/web-apps/current-work/multipage/
HTML5移動Web開發（三）——在移動網站中使用HTML5
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
