寫一個 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 網頁。

分享這篇文章：

迴響

目前還沒有迴響。

留下你的迴響

*

*