姬小光前端興趣班【第004期】- 文件型別與 HTML 頁面的基本結構

姬光發表於2015-07-01
前端型別HTML

enter image description here

前面幾期我都在嘗試以最平緩的曲線讓大家快速入門，後續根據同學們的反饋，內容的深度會逐步提升。那麼這一期我們來說說文件型別與HTML頁面的基本結構。

文件型別與 HTML 頁面的基本結構

文件型別（doctype）說白了就是HTML有幾個版本，你需要告訴瀏覽器用哪個版本的規範來解釋，才能處理得更好。

在 HTML5 （對，就是傳說的H5）以前的文件型別非常冗長，大家可以不用在意了。感興趣的同學可以百度一下我之前寫的文章《深入理解瀏覽器相容性模式》深入理解一下。

對於現在的HTML頁面，你只需要在程式碼的最前面寫上如下內容即可：

<!DOCTYPE html>

下面讓我們來看一下HTML頁面的基本結構：

enter image description here

在第一期（回覆 001）的補充技能中已經教過大家，在網頁上點選右鍵“檢視原始碼”，即可看到頁面的前端程式碼，不知道大家有沒有嘗試一下，還沒有試過的同學可以親測一下了，你會發現大體上跟上面的結構都是類似的。

我們再來看這段程式碼，其中 <!DOCTYPE html> 部分我們已經說過了，請看下面的 <html> ，由於我們使用的是 HTML 語言，所以 HTML 型別的文件需要以一對 HTML 標籤包裹。

再往下的標記是 head 和 body 相當於頁面的“頭”和“主體”部分，下面這張圖能幫助你更好滴理解：

enter image description here

頁面的 head 部分主要負責一些需要預先載入的元資訊，樣式，指令碼，以及頁面標題等。而 body 部分則是我們頁面的主題內容，比如段落文字，圖片，連結等。

那麼，既然我們已經學會了標準的 HTML 文件寫法，就讓我們把上一期的程式碼繼續優化一下，變成漂亮而標準的 HTML 程式碼吧：

enter image description here

當然，儲存之後頁面的顯示不會有任何變化，只是在瀏覽器的 tab 處顯示了標題：

enter image description here

細心的同學可能發現，這次程式碼的截圖變漂亮了，而且關鍵的部分也用不同的顏色標了出來，太方便了有木有？

其實這是一款非常強大的編輯器，叫做 sublime text 2，大家可以百度一下下載一個玩玩。想真正寫些程式碼，沒有一款得心應手的編輯器肯定是不行的，所以希望大家都去下載一個編輯器，當前流行的 sublime 更強大一點。

enter image description here

OK, 下課。

enter image description here

相關文章