導語
從今日起計劃推出系列課程《HTML5和CSS課程》。內容來源於《HTML5與CSS3基礎教程（第8版）》。如果你喜歡看書，請購買正版書籍。以下內容均來源於對該本書的解讀。
開始編寫網頁
每個 HTML 文檔都應該包含以下基本成分。
上面代碼是每個 HTML 頁面的基礎。縮進並不重要，但結構很重要。在這個例子中，默認語言（由lang 屬性指定）被設為代表英語的 en。字符編碼被設為 UTF-8。
說明
html 元素（包含 lang 屬性，該屬性不是必需的，但推薦加上）
head 元素
說明字符編碼的 meta 元素
title 元素
body 元素
上面的代碼呈現再頁面上就等同於一張空白的紙，因為body 裡面沒有任何內容，如圖 下圖：
01
編寫 HTML5 頁面開頭的步驟
1、輸入 ，聲明頁面為HTML5 文檔。
2、輸入 ，開始文檔的實際 HTML 部分。其中， languagecode 是頁面內容默認語言的代碼。例如， 表示西班牙， 表示法語。還可以寫得更詳細些，如 表示美國英語，而 則表示英國英語 。
3、輸入
，開始網頁文檔的頭部。4、輸入 （或 ）， 將 文 檔 的 字 符 編 碼聲明為 UTF-8。空格和斜槓是可選的，因此 跟其他表達式形式都是有效的。（ UTF-8 以外的其他字符編碼也是有效的，不過 UTF-8 的適用面最廣，很少有需要用其他編碼的情況。）
5、輸入
<title>。這裡將包含頁面的標題。6、輸入 ，結束頁面文檔的頭部。
7、輸入
，開始頁面的主體。這裡是放置頁面內容的地方。8、為頁面內容預留一些空行。
9、輸入 ，結束主體。
10、輸入 ，結束頁面。
我們會發現上面的步驟似乎比較多，不過，由於所有的頁面都是這樣開始編寫的，可以使用一個單獨的 HTML 頁面作為創建每個頁面的模板，以節省輸入的時間。實際上，很多代碼編輯器都可以為新頁面指定初始的代碼，這樣就更簡單了。
01
網頁的兩個部分
HTML頁面分為兩個部分： head 和 body，DOCTYPE 出現在每個頁面的開頭，
在文檔 head 部分，通常要指明頁面標題，提供為搜索引擎準備的關於頁面本身的信息，加載樣式表，以及加載 JavaScript 文件（不過，出於性能考慮，多數時候在頁面底部 標籤結束前加載 JavaScript 是更好的選擇）。除了 title，其他 head 裡的內容對頁面訪問者來說都是不可見的。body 元素包住頁面的內容，包括文本、圖像、表單、音頻、視頻以及其他交互式內容，也就是訪問者看見的東西。
提 示
使 用 HTML5 DOCTYPE 可 以 確 保瀏覽器以可靠的模式呈現頁面，同時告訴HTML 驗證器根據 HTML5 允許的元素和語法檢查代碼。
提 示
HTML5的DOCTYPE不區分大小寫。有的人可能輸入 ，不過，使用 是更常規的做法。
提 示
搜索引擎可能會根據 lang 屬性指定的語言區分搜索結果，從而僅顯示與搜索詞語言相同的頁面。屏幕閱讀器也可能通過指定的語言調整其發音。
提 示
要 確 保 將 你 的 代 碼 編 輯 器 配 置 為以 UTF-8 保 存 文 件， 與 代 碼 中 通 過 語句指定的編碼相同。要注意的是並非所有的編輯器都默認以 UTF-8 保存文件。如果頁面沒有設置為 UTF-8，有的字母（如帶重音符的 i、帶波形符（～）的 n）就會變成一些奇怪的字符。
提 示
嵌套在 head 元素裡的代碼不一定要縮進。不過，縮進可以讓你一眼看出 head 從哪裡開始，包含什麼內容，以及在哪裡結束。在有些頁面中， head 變得很長並不少見。
有了 HTML5 以後，編寫代碼的開頭部分變得容易多了。特別是跟從前的 DOCTYPE 相比，HTML5 的 DOCTYPE 短得讓人驚訝。在 HTML 4 和 XHTML 1.0 時代，有好幾種可供選擇的DOCTYPE，每一種都會指明HTML 的版本，以及使用的是過渡型還是嚴格型模式。幸好，所有的瀏覽器，無論新舊，都理解HTML5 的 DOCTYPE，因此你可以堅持在所有頁面中使用它，忘掉過去的那些 DOCTYPE。
好，今天的課程就到這裡！！！
閱讀更多 前端全棧攻城獅 的文章
