本節書摘來自異步社區《HTML5與CSS3實戰指南》一書中的第2章，第2.2節,作者： 【美】Estelle Weyl , Louis Lazaris , Alexis Goldstein 更多章節內容可以訪問云棲社區“異步社區”公眾號查看。
2.2 基本的HTML5模板
在您學習HTML5和新技術時，您可能想創建自己的藍圖或示例文件，并通過它們來構建基于HTML5的項目。實際上，您可能對已存在的XHTML或HTML4.0項目已經做了類似的事情。我們鼓勵您這樣做，當然您也可以考慮使用一些在線資源，從而為您提供一個HTML5的基本起點1。
在這個項目中，我們將從頭開始，編寫自己的代碼，并對每一部分進行詳細講解。當然，即使是最好、最龐大的示例網站也不可能包含所有的新元素和技術。我們也會詳細講解一些未在我們所創建的示例網站中應用的新功能。這樣，在您決定如何創建HTML5和CSS3網站和Web應用程序時，就會熟悉所提供的各種選項，也就可以將本書當作許多技術的快速參考資料了。
讓我們從一個簡單的HTML5網頁的基本框架開始：
仔細看一下上面的標記。如果您正在從XHTML或HTML4過渡到HTML5，您會立即注意到HTML5在許多方面是不同的。
**
2.2.1 Doctype**
首先，我們進行文檔類型聲明（Document Type Declaration，也稱為doctype）。它可以用來告訴瀏覽器（或任何其他分析程序）它們所查看的文件類型。在HTML文件中，它表示具體的HTML版本及風格。doctype應是位于HTML文件最頂端的第一個項目。過去，doctype聲明非常難看且很難記，對于XHTML 1.0嚴格類型來說，doctype聲明如下所示。
對于HTML4過渡類型來說，doctype聲明如下所示。
經過幾年的發展，代碼編輯軟件開始提供包含doctype的HTML模板，或提供自動插入模板的方式。當然，快速的網頁搜索會很輕松地調出代碼以插入您需要的文檔類型。
盡管在文檔頂端的一長串文本并沒有對我們造成太大的影響（沒有迫使我們的網站瀏覽者下載其他的字節），HTML5清理了這個難以辨認的眼中釘。現在，我們所需要的只是下面這一行代碼。
既簡單又明了。請您注意，“5”已經在聲明里消失了。盡管目前網站標記的版本是“HTML5”，但這確實僅是之前的HTML標準的更新—以后的規范還會在今天的基礎上進一步發展。由于瀏覽器要支持網站的所有內容，因此這里沒有一個固定的文檔類型去告訴瀏覽器應支持文檔中的哪種功能。
2.2.2 html元素
任何HTML文件中所包含的內容都是html元素，該元素在HTML5中并沒有顯著的變化。在我們的示例中，包含了值為“en”的lang屬性，表示文檔的語言是英語。在基于XHTML的語法中，要求包含xmlns屬性。在HTML5中，已經沒有這項要求。即使是lang屬性，對于文檔的驗證或正確運行都不是必不可少的。
我們目前所擁有的標記如下所示，其中包括結束</html>標記：
2.2.3 head元素
頁面的下一部分是<head>部分。head中的第一行用來定義文檔的字符編碼。這是另一個被簡化的元素。它的用法如下所示。
HTML5通過將字符編碼<meta>標簽的內容縮減到最少，從而使之得到改進。代碼如下所示。
在幾乎所有的情況下，utf-8將是您在文檔中使用的值。本章篇幅有限，這里將不能完整地介紹字符編碼，或許您對此也并不感興趣。當然，如果您想進一步研究，可以訪問W3C網站2查閱相關主題。
預先準備 為確保所有瀏覽器能夠正確讀取字符編碼，整個字符編碼聲明必須包含在文檔的前512個字符中。必須將它放在所有基于內容的元素前面（比如，
元素，我們將在示例網站中演示）。關于這個主題，我們可以寫很多。但是，為了使你們節省精力，我們省去了一些細節。現在，我們可以滿意地接受這個簡化的聲明，并繼續我們文檔的下一部分。
在這幾行中，HTML5與以前版本的語法幾乎沒有什么不同。頁面標題的聲明和以前一樣，<meta>標簽僅是一個可選的示例，用來表示可放置的位置，您可以按照自己的意愿，在此放置任意多個meta元素。
此標記塊的主要部分是樣式表，我們使用習慣的link元素來包含它。初看起來，您可能沒有發現任何區別。但是按照慣例，link元素包含一個type屬性，其值為text/css。有趣的是，在XHTML或HTML4中不需要該屬性，即使是在使用嚴格的文檔類型時也是如此。因為所有的瀏覽器都可以識別鏈接樣式表的內容類型，而無須其他的屬性，所以，基于HTML5的語法鼓勵您完全放棄使用type屬性。
2.2.4 公平競爭
接下來，在介紹標記中的新元素之前，我們需要先了解一些背景知識。
HTML5包括一些新元素，比如，我們將稍后介紹的article和section元素。您可能認為是舊版瀏覽器的主要問題，但這是錯誤的想法。這是因為大多數瀏覽器實際上并不在乎您使用什么標簽。如果您的HTML文檔有<recipe>標簽（或甚至使用<ziggy>標簽），或者CSS將一些樣式附加到該元素上，幾乎所有瀏覽器都會正常運行，并應用該樣式。
當然，這個假設的文檔不會生效，但在大多數瀏覽器（Internet Explorer是一個例外）上可正確呈現。在Internet Explorer 9之前，Internet Explorer禁止接收無法識別的元素。呈現引擎視這些秘密元素為“未知元素”，所以您不能改變其外觀及行為方式。這不僅包括我們所設想的元素，還包括那些在所開發的瀏覽器中未定義的元素。當然也包括HTML5的新元素。
編寫本書時，Internet Explorer 9剛剛發布（被廣泛使用還會需要一段時間），所以這是一個問題。我們想開始使用這些光鮮的新標簽，但是如果不能將這些CSS規則附加到這些元素上，那么我們的設計就會崩潰。
幸運的是，這里有一個解決方案：一個非常簡單的JavaScript，最初由John Resig開發，可以神奇地使HTML5的新元素在Internet Explorer的早期版本中顯示。
我們已經在條件注釋的標簽<script>中包含了所謂的“HTML5 shiv”3。條件注釋是Microsoft在Internet Explorer中實施的一個專用功能。它們向您提供用腳本或樣式確定特定瀏覽器版本的能力4。這種條件注釋告訴瀏覽器：封裝的標記僅供用戶使用Internet Explorer 9之前的版本查看網頁。
請注意，如果您用JavaScript庫處理HTML5的新功能或新API，可能已經使HTML5的腳本可以運行。在本例中，您可以刪除關于Remy Sharp的腳本。其中的一個示例是Modernizr5，這是一個JavaScript庫，它能檢測現代HTML和CSS的新功能，將在附錄A介紹它。Modernizr包括能夠使HTML5在Internet Explorer早期版本中顯示的代碼，所以Remy腳本就顯得多余了。
使用Internet Explorer 6～Internet Explorer 8但禁用了JavaScript的用戶該怎么辦呢？
當然，仍有一些用戶（禁用了JavaScript的用戶）不能夠使用Remy的HTML5 shiv，可能有這個或那個原因。作為網站設計人員，即使用戶不能使用JavaScript，我們也必須使所有用戶都能夠瀏覽我們創建的網站內容。當45%～75%的用戶使用Internet Explorer時，這似乎是一個嚴重的問題。
但是事實并沒有那么糟糕。許多研究表明，不能使用JavaScript的用戶非常少，可以忽略不計。
2010年10月在雅虎網站發布的一項研究 6表明，全世界不能使用JavaScript的用戶大約只有1%。而另一個對數十億用戶的研究 7也得到了幾乎相同的結果。在這兩項研究中，相對于世界其他地方，美國用戶不能夠使用JavaScript的人數最多。
還有其他一些使用HTML5新元素的方式，不需要JavaScript在不受支持的瀏覽器中顯示設置了樣式的元素。不幸的是，那些方法很不現實，有許多其他缺陷。
如果您仍然十分關心這些用戶，可以考慮這種混合方法。例如，在缺少樣式的地方使用新HTML5元素不會有大問題，同時對于主要的布局容器，可使用div等傳統的元素。
2.2.5 剩余部分是歷史簡介
讓我們看看啟動模板的剩余部分，我們通常使用body元素以及其結束標記和</html>的結束標記。我們還在script元素中包含JavaScript文件的引用。
與我們前面討論過的link元素非常相像，<script>標簽并不要求您聲明type屬性。在XHTML中驗證包含外部腳本的網頁，<script>標簽應如下所示：
出于實用性目的，JavaScript僅是一種在Web上使用的腳本語言，并且即使您不明確聲明，所有的瀏覽器也都會假設您使用的是JavaScript，所以type屬性無需在HTML5文檔中聲明：
我們將script元素放在頁面底部，以使其符合嵌入JavaScript的最佳做法。我們還需處理頁面的載入速度。當瀏覽器碰到腳本時，它會將腳本分解成若干部分，此時將暫停載入和呈現頁面的其余部分。如果在頁面頂部以及所有內容之前放置大量腳本，這將導致頁面載入十分緩慢。這就是為什么將大部分腳本放在頁面最底部的原因，這樣可以在頁面載入完成以后，再對腳本進行分解。
在一些情況（比如HTML shiv）下，由于您想在瀏覽器開始呈現頁面之前呈現效果，可根據需要，將腳本放在文檔的head中。2
之timer的使用,鍵盤,鼠標的監聽)
)
