《HTML5 canvas開發詳解（第2版）》——1.2 基礎的HTML5頁面

本節書摘來自異步社群《html5 canvas開發詳解（第2版）》一書中的第1章，第1.2節,作者： 【美】steve fulton , jeff fulton 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

在開始講解canvas前，需要談論一下html5的相關标準——這裡将使用html5來建立web頁面。

html是用于在網際網路上建構頁面的标準語言。本書不會将很多時間花費在講解html上，但html是< canvas >的基礎，是以不能完全跳過它。

一個基本的html頁面分成幾個部分，通常有< head >和< body >，新的html5規範增加了一些新的部分，例如< nav >、< article >、< heade r>和< footer >。

< head >标簽通常包含與使用< body >标簽來建立html頁面相關的資訊。将javascript函數放在< head >中是約定俗成的，稍後讨論< canvas >标簽時也會這樣做。雖然有理由把javascript函數放在< body >中，但是簡單起見，最好把javascript函數放在< head >中。

基本的html頁面如例1-1所示。

1.2.1　< !doctype html >

這個标簽說明web浏覽器将在标準模式下呈現頁面。根據w3c定義的html5規範，這是html5文檔所必需的。這個标簽簡化了長期以來在不同的浏覽器呈現html頁面時出現的奇怪差異。它通常為文檔中的第一行。

1.2.2　< html lang="en" >

這是包含語言說明的< html >标簽：例如，" en "為英語。下面是一些常見的語言值：

中文——lang= " zh "；

法語——lang= " fr "；

德語——lang=" de "；

意大利語——lang=" it "；

日語——lang= " ja "；

韓語——lang= " ko "；

波蘭語——lang= " pl "；

俄語——lang= "ru "；

西班牙語——lang = " es "。

1.2.3　< meta charset="utf-8" >

這個标簽說明web浏覽器使用的字元編碼模式。如果沒有需要特别設定的選項，一般沒必要改變它。這也是html5頁面需要的元素。

1.2.4　< title >… title >

這個标簽說明在浏覽器視窗展示的html的标題。這是一個很重要的标記，它是搜尋引擎用來在html頁面上收錄内容的主要資訊之一。

**

1.2.5　一個簡單的html5頁面**

現在，在浏覽器中看看這個頁面（這是一個偉大的時刻，可以準備好工具開始開發代碼了）。打開所選擇的文本編輯器以及web浏覽器——safari、firefox、opera、chrome或ie。

（1）在文本編輯器中，輸入例1-1中的代碼。

（2）選擇路徑，儲存為ch1ex1.html。

（3）在chrome、safari或firefox的file菜單中，找到open file指令，單擊它，将看到一個能夠打開檔案的對話框（在windows下用chrome時，也可以按ctrl+o鍵來打開檔案）。

（4）找到剛剛建立的ch1ex1.html。

（5）單擊“打開”按鈕。

可以看到圖1-1所示的結果。

https://yqfile.alicdn.com/f549f8f8982e684707bb9d079d2b40ddee44831c.png" >