《Oli-Zhao的前端一萬小時》之：（1）HTML基礎

02-27

本知識學慣用時：2小時，總第12/10000小時

前言：學習前端我們有個比喻：先打地基建房子——HTML；然後房子建好後進行硬裝修——CSS；接著把門、窗戶、自來水龍頭、電燈開關、電燈等安裝好——JavaScript；可是還沒有電，沒有水怎麼辦？——造發電機、興修水力發電站（PHP等）；可是依舊沒水沒電——修水庫，引入水源，進行水力發電（MySQL等）。
那接下來的系列文章，就開始我們的打地基建房子，然後做個硬裝修。

一、認識HTML

在《Oli-Zhao的前端一萬小時》之：老生常談的從URL輸入到頁面展現背後發生的事中，我們認識到了網路工作的整個流程，也知道了我們前端開發的主力點是在「MVC（model view controller）」中的「視圖（view）」這一環。大致回顧下這篇文章：

從URL輸入到頁面展現經過以下過程：

1、在瀏覽器輸入URL；
2、瀏覽器查找域名對應的IP地址；
3、瀏覽器根據IP地址與伺服器建立聯繫；
4、瀏覽器與伺服器通信：瀏覽器請求，伺服器處理請求並呈現頁面。

然後我們進行倒推：

第一，伺服器處理請求並呈現頁面：web伺服器是一個全天24小時都在崗的先進勞模，他隨時在準備處理來自web瀏覽器發來的請求。一旦有請求，web伺服器就會以適當的處理方式把裝在他身體里的HTML文件（HyperText Markup Language 超文本標記語言）（每個伺服器會存儲HTML文件、圖像、聲音和其他類型的文件）反饋給web瀏覽器；
第二，web瀏覽器得到反饋後怎麼去顯示這個頁面：HTML是瀏覽器顯示頁面的關鍵，它會告訴瀏覽器頁面的結構和所有內容。web瀏覽器在讀取伺服器反饋的HTML文件時，他會翻譯文本中的所有標記（告訴瀏覽器：標題放哪裡，段落放哪裡，哪些文本需要強調等等）

二、動手寫一個HTML

任務：把本篇文章的以下頁面，用HTML寫出來，並完全熟悉每個元素。

第一步，打開記事本/文本編輯器（具體相關配置請私聊）——初學的前半個月強烈建議用最簡單的文本編輯工具把代碼一個個敲出來。
第二步，分析結構：
第三步，給這些文字加標記：

<!DOCTYPE html> 注釋1<html> 注釋2 <head> 注釋3 <meta charset="utf-8"> 注釋4 <title>Oli-Zhao的前端一萬小時</title> 注釋5 </head> 注釋6 <body> 注釋7 <img src="HTML圖片" alt="HTML首頁圖"> 注釋8  注釋9 <h1>《Oli-Zhao的前端一萬小時》之:(1)HTML基礎</h1> 注釋10 <p>本知識學慣用時：2小時……</p> 注釋11 <p>前言：學習前端我們有個比喻：先打地基……<br> 注釋12 那接下來的系列文章，我們開始我們的…… </p> 注釋13 <h2>一、認識HTML</h2> <p>在《Oli-Zhao的前端一萬小時》之……</p> </body> 注釋14</html>

-- 注釋1:每個頁面都要從doctype開始，它為瀏覽器指定這個頁面的文檔類型，以便瀏覽器更正確的顯示HTML。只要按照這樣的格式和位置寫，那麼瀏覽器就會認為你在使用標準HTML。
這樣寫的好處是：不用再像HTML5出來之前那樣，又要寫上HTML版本號、又要寫上這個HTML文檔所依據的標準在什麼位置；一勞永逸，之後不管HTML再怎麼更新，我們的文檔都可以被瀏覽器以最正確的方式顯示出來；
-- 注釋2:必須以<html>標記開始我們的頁面，以</html>標記結束，注意看，結束標記多了一個「/」。這整個包含開始標記+內容+結束標記的一個整體就稱作一個「元素」。
對於<html>元素，頁面中的所有內容都嵌套在這個元素中。

所謂「嵌套」：是指一個元素可以放在另一個元素的裡邊（如同建房：整個房子是一個整體，入戶門進去後，會有廚房、衛生間、客廳、卧室等個體，而主卧室裡邊可能還有一個衣帽間、一個廁所等）；
-- 注釋3、注釋7:只有<head>和<body>元素能直接放在<html>元素里。
<head>里主要放一些與當前頁面內容無關、但承載一些對頁面描述的標記——可以設置它的meta、title、可以放CSS，這些部分不會被用戶看到；<body>裡邊放的是和頁面內容相關的元素——即你想被用戶看到的內容。
-- 注釋4:「meta"指的是我們要告訴瀏覽器關於我們頁面的一些信息；
「charset"是<meta>標記的屬性，我們的開始標記都是可以有屬性的。這裡，我們要在charset屬性中指定字元編碼；
「utf-8"是unicode系列中的其中一個編碼，這個編碼是互聯網上使用最廣泛的一種unicode的實現方式。它是為傳輸而設計的編碼，並使編碼無國界，這樣就可以顯示全世界上所有文化的字元了——不管字母、數字還是中文、阿拉伯文等等。
· 詳細原因：
- 當我們保存一個寫好的HTML文件，編碼方式會保存為UTF-8；

- 一個文件就是一堆的數據，即我們寫的內容變成了一堆的數據。那這個數據到底是變成了123，還是456呢？
- 這裡我們就用到了「編碼」，用的編碼方式不一樣，那麼數據呈現的狀態就不一樣；
- 然後，當我們把這個以適當編碼方式保存好數據再次展示在瀏覽器頁面上時（或用其他編輯器打開時），那這個數據還要再恢復出來；
- 那這時候，瀏覽器（或編輯器）需要使用相同的、與文件相對應的編碼方式去解碼（但瀏覽器不是萬能的，你不告訴他，他就不知道用什麼方式去解碼,他會隨意選擇）；
- 這時，當編碼是一種方式，而解碼又是另一種方式時，頁面就會出現」亂碼「；
- 而解決亂碼的方式就是：只需要知道我在編輯器保存這個HTML文件時，保存的什麼編碼格式，然後在頭部 <meta charset="？">中告訴瀏覽器用什麼方式來解碼。
-- 注釋5:<head>元素里必須在正確的位置包含一個<title>元素；

以上圈住的的都是我們「title"這個元素呈現出來的

-- 注釋6：首部<head>元素結束標記；
-- 注釋8:這裡是一個<img>元素，img=image圖像。我們知道，HTML頁面是一個純文本，圖像是絕對無法作為頁面的一部分直接顯示出來的，都是通過外部引入（鏈接）的方式來展現。

我們瀏覽器在看到這個元素時，會做的處理不是像看到<h1>或<p>元素那樣直接在頁面上顯示相關內容，而是需要先到web伺服器去獲取這個圖像，然後再顯示出來。
· web常用的圖像格式有JPEG、PNG和GIF;
· JPEG：最適合保存照片和其他複雜圖像；
· PNG或GIF：最適合保存logo和其他包含單色、線條或文本的簡單圖形；
-- 注釋8中：<img>有兩個必要的屬性：「src"和「alt"。
· src:它是 source 的縮寫，意指這個圖像來源自哪裡（這後邊可以放所在文件的路徑也可以是一個所在的URL);
· alt：這個屬性主要是為了規避例如：因網速差、硬體設備限制等外部因素，我們的瀏覽器不能很好的顯示出圖像，那 alt 後邊的文本將會取代圖像告訴用戶這裡會是什麼東西（參考後邊的頁面展現）。
-- 注釋9:這個是用來寫我們的注釋的，便於我們閱讀、修改等。這部分所有內容都不會被瀏覽器顯示出來。
-- 注釋10:這裡用一個<h1>開始標記，來說明這句話是一個一級標題。我們的標題可以往下分到<h6>，一般工作實際中，一般到<h3>。

-- 注釋11: 「p「是」paragraph"段落的意思。所以這裡<p>開啟一個段落。
-- 注釋12：<br>元素，是我們HTML中，專門用來換行的元素。「br"="break"間斷，換行的意思。
注意，如果一個元素沒有任何實際內容，只有開始標記和結束標記。那麼這個元素可以直接簡寫成一個開始標記。這樣的元素我們叫他「void元素「——空元素。如：<br>元素、<img>元素等。
-- 注釋13:時刻不要忘記一個完整的元素包含哪些標記：元素=開始標記+內容+結束標記
-- 注釋14:整個身體元素結束，以及下邊的整個<html>元素的結束。這都是不可或缺的標記。

第四步，在你喜歡的位置新建一個文件夾來存儲我們練習中所有相關文件、圖像等。
第五步，把上邊我們寫的文檔存儲為 .html 格式文件，並記得編碼方式為 utf-8 。把這個文件保存在第四步建立的文件夾里。
第六步，用瀏覽器打開這個HTML文稿。對照第三步的注釋再次學習，看看每個標記都在頁面中對應的那個東西。

頁面展現

後記：這篇的學習，我們大致了解了HTML的基本結構，也寫出了第一個可以在瀏覽器上展示的頁面。那下一篇，我們就細講HTML其他重要的元素（列表、超鏈接、表格、音視頻等）、以及對應的屬性。前端很有趣，即使用10000小時對待也不會有一點厭煩。

歡迎繼續關注下文：

《Oli-Zhao的前端一萬小時》之：（2）HTML元素、屬性詳解

（本文版權歸Oliver所有，轉載需說明來源）