前端修煉の道 | 如何成為一名合格前端開發工程師？

小橋流水嘩啦啦發表於2018-11-06

上期回顧

在上一節我們已瞭解前端開發是做什麼的，現在的問題是，如何才能成為一名合格的前端開發工程師？相信這個問題是大家比較關心的。

前端開發工程師

如果大家在一些搜尋引擎上搜尋“前端開發工程師”需要具備什麼技能？可以看到搜尋結果中會出現許多諸如要掌握： “HTML” “CSS” “JavaScript” “DOM” “Ajax” “React.js” “vue. js” “node.js” 等技術的資訊。一些想入行的朋友看到要學習這麼多東西,可能會望而卻步，不敢去了解它。

其實前面所搜尋到的結果，很多都是由前端開發的核心技術衍變而來的。不管前端開發技術怎麼發展，萬變不離其宗，它的核心都是 HTML、CSS 和 JavaScript 這三大技術。

只要把這些核心技術的知識體系掌握紮實，就可以順利地進行前端開發了，至於“React.js” “vue.js” “node.js”這些技術，不妨等基礎穩妥紮實後，再慢慢地學習，畢竟很多“框架”或“類庫”都是流行一時，沒準正在看本書的你在學完本書後發現，有些技術早不流行了，而那些原生語言卻依然有著強悍的生命力，仍然活躍在各類商業應用中。因此，從這個意義上來說，作為開發者掌握原生語言的開發技能才是重點。在人類社會,語言是人與人之間用來溝通的方式

比如和英國人說話需要用英語，和俄羅斯人說話就得用俄語。在計算機世界，我們要與計算機進行資訊的交流同樣需要語言，這個語言稱為計算機語言。人類語言存在不同的型別，計算機語言也同樣存在不同型別。針對不同的應用,我們需要使用不同的計算機語言, 比如針對服務端進行業務邏輯和資料的處理需要 Java、C#、C++ 等計算機語言，而針對在瀏覽器中展現網頁以及實現使用者與網頁的互動等效果的應用，則需要使用 HTML、CSS、JavaScript 等計算機語言。

HTML 超文字標記語言：搭建網頁“結構”

HTML(Hypertext Markup Language)

中文意思是超文字標記語言。為了方便記憶和理解,我們將 HTML 中的 3 個單詞拆分開來,分別解釋其中含義。

Hypertext(超文字)

指的是頁面中的各種內容。在一個網頁中,有文字、超連結、圖片、音訊、視訊等, 這些內容共同構成了網站資訊,這些資訊以計算機語言的形式編寫而成,因此稱它們為“超文字”內容。

Markup(利潤。在這裡指標記或標籤)

HTML 語言在大多情況下,使用一對標籤“<></>”來表示,其中“<>”為開始標籤,“</>”為結束標籤。標籤的尖括號內放置著各種英文關鍵詞,例如:“

</ div>”,它是一段 HTML 程式碼,用來表示一個“div”的標籤對。值得注意的是 HTML 程式碼(標籤)並不會顯示在瀏覽器中,能在網頁中顯示的是標籤對中包含的文字,比如:“

我們是內容

”這段程式碼

如果希望在網頁中放置一段文字,可以使用“

”這樣的標籤對

例如：
“<p> 妙味課堂是國內知名的 IT 培訓機構 </p>”,它將會把“妙味課堂是國內知名的 IT 培訓機構”作為一段文字放置在網頁中。
“
又比如：
“<h1></h1>”這個標籤對代表著網頁中的一個一級標題, 例如:“<h1> 前端概要 </h1>”,它將會把“前端概要”設定為一級標題放置在網頁中。可見,不同的標籤 代表著網頁上不同的內容。
一個 HTML 頁面就是由不同的標籤組合而成的。在本文後續內容中還會介紹更多標籤型別。 
複製程式碼

Language(語言)

HTML 就是由各種各樣的標籤組成的語言,在這套語言體系內,描述著網頁的“視訊、音樂、文字、圖片”等內容。

HTML 從誕生到現在經歷多個版本，依次是

HTML2.0
HTML3.2
HTML4.0
HTML4.01
HTML5

HTML5 相比於其他版本,增加了許多語義化標籤,如 header、nav 等文件結構標籤,音訊和視訊以及 canvas 畫布等標籤。

CSS 層疊樣式表：給網頁新增“樣式”

CSS(Cascading Style Sheets)

中文意思是層疊樣式表,以下簡稱為“樣式表”。樣式表的作用就是給網頁加樣式。使用 HTML 標籤搭建頁面結構時,標籤使用的都是自己本身在瀏覽器中的“模樣”,即預設樣式。這些預設樣式大部分情況下都毫無美感。而 CSS 樣式就相當於“化妝師”,把頁面上的內容“梳妝打扮”一番, 然後將美好的狀態呈現在使用者面前。

例如：

圖 1-8 就是瀏覽器預設顯示的樣式,