寫一個 HTML5 網頁 － HTML 篇
HTML5 是 HTML 標記語言（它不是程式碼！）的下一個主要修訂版本， 儘管現在仍在草稿階段，但許多主流瀏覽器都已開始支援 HTML5 的各種功能， 這篇文章介紹一個基本的 HTML5 網頁如何構成。可能需要一點 HTML 的基本知識才能看懂。
一張基本的 HTML5 網頁
首先從最基本的 HTML 檔案開始看起。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="utf-8">
<title></title>
<!-- META -->
<meta name="description" content="">
<meta name="author" content="">
<!-- 行動裝置顯示設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS 樣式表 -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr 函式庫 -->
<script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<!-- 網頁內容 -->
<div id="container">
<header>
</header>
<div id="main" role="main">
</div>
<footer>
</footer>
</div>
<!-- JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')</script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- Google Analytics 追蹤程式碼 -->
<script>
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
<!-- 針對 IE6 使用者顯示 Chrome Frame 安裝提示 -->
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>
以下開始將這張網頁從頭開始一行一行解說起。
Doctype
以往在 XHTML 的標準下，需要寫的 Doctype 可能是 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 等等一長串的文件類型宣告，而在 HTML5 底下，只需要 <!DOCTYPE html>’，15個字元，簡潔有力。
要注意的是 Doctype 前面不能有任何字元，包含空格或是換行符號，否則某些瀏覽器可能會無視這個 Doctype。
<html lang="zh-TW">
在 HTML 的根元素下，可以指定網頁的語言，如 ‘en’、’zh-TW’ 等。至於以前 XHTML 的 ‘xmlns="http://www.w3.org/1999/xhtml"‘ 屬性當然也不再需要了。
網頁編碼
<meta charset="utf-8">
這一行指定了這個網頁的編碼是 UTF-8。事實上這是從 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8″ /> 這種寫法簡化而來的。這在所有瀏覽器內都行得通。
編碼的指定最好放在 <head> 裡的第一行，甚至在 <title> 之上。
META 資訊
<meta name="description" content="">
<meta name="author" content="">
設定這個網頁的描述和作者名稱，這對於搜尋引擎或社群網站在抓取資料時非常有用。
<meta name="viewport" content="width=device-width, initial-scale=1">
設定行動裝置（手機、平板電腦）上的預設縮放大小和寬度。
Favicon
對，這裡沒有宣告 <link rel="favicon" … >’，瀏覽器也會自動去抓取網站根目錄下的 favicon.ico ，所以不需要特別寫出來。但當 favicon.ico 的位置不是在根目錄、或檔名不叫做 favicon.ico 的時候，就需要加個 <link> 標籤來告訴瀏覽器。
CSS
和以前一樣，使用 <link rel="stylesheet" href="css/style.css"> 來加入 CSS 樣式表檔案。
其中 type="css" 的屬性值已經不需要再寫了，因為目前這世上的樣式表只有一種格式，就是CSS。
Modernizr 函示庫
<script src="js/libs/modernizr-2.0.6.min.js"></script>
Modernizr 是個很好用的函示庫，原先是用來檢測瀏覽器是否支援各種 HTML5 的功能。但發展到現在已經包山包海，包進了許多好用的函示庫。
其中一個重要的功能是 HTML Shim，這能讓不支援 HTML5 標籤的瀏覽器（對，就是IE）認得新的標籤。
要下載 Modernizr，請到官方網站的下載頁面，自訂想要的功能。
Modernizr 必須在 <head> 內就先載入。其餘的 JavaScript 則放在 </body> 之前，這樣能加快網頁載入的速度。
<body>
進入網頁的主要內容。HTML5 新增了語意元素（如範例中的 <header> 等等）。這裡先跳過…。
JavaScript
將所有的 JavaScript 放在網頁最底端可以節省網頁開啟的時間。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')</script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
第一行是 jQuery 函示庫。使用 Google CDN 上的檔案。 第二行是當 Google CDN 連不上、找不到 jQuery 時，可以改為載入放在伺服器上的檔案。 接著就是自己的 JavaScript 檔案了。 不需要 type="text/javascript 屬性值，瀏覽器也會當作是 JavaScript 來處理。
Google Analytics
<script>
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
載入 Google Analytics 的追蹤程式碼。其中 UAXXXXXXXX1 要改為自己的 ID。
這裡使用的是 Modernizr 裡的「yepnope.js」功能來載入。
Chrome Frame
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
一起來終止 IE6 吧，這幾行程式碼可以在使用 IE6 瀏覽時顯示 Google 推出的 Chrome Frame 外掛安裝提示，Chrome Frame 可以讓使用者在 IE 下直接使用 Chorme 的網頁引擎。
以上就是一個基本的 HTML5 網頁。
迴響
目前沒有迴響。