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